Jacob Stamm Jacob Stamm - 1 year ago 70
CSS Question

How can I make an img stack in front of an h1?

In this example of a legend, I have a little "info" image that will be used for a tooltip when you hover over it. However, other elements seem to be stacking on top of the image, even when I set the

of the image to a very high number. How can I make it so that the image is stacked on top so that my tooltip works properly?

body {
background-color: white;
#foreignPartTooltip {
z-index: 9999999;
.icon16 {
width: 16px;
height: 16px;
border: 0px;
margin: 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
cursor: help;
.s101-fieldset {
border: 1px solid #c0c0c0;
border-radius: 3px;
display: inline-block;
position: relative;
.s101-fieldset h1 {
font: 12px Verdana;
position: absolute;
width: 100%;
margin-left: 0;
margin-right: 0;
text-align: center;
.s101-fieldset h1 span {
display: inline;
background: #fff;
padding: 5px 4px 0;
position: relative;
top: -17px;
.s101-fieldset > .s101-fieldset-content {
padding: 8px;
.s101-fieldset > .s101-fieldset-content .legend-item {
border: 1px solid #aaa;
font: 13px Verdana;
cursor: default;
padding: 3px 5px;
.s101-fieldset > .s101-fieldset-content .legend-national-part {
margin: 3px 2px 8px;
margin-bottom: 8px;
background-color: gold;
.s101-fieldset > .s101-fieldset-content .legend-local-part {
margin: 2px;
background-color: white;
.s101-fieldset > .s101-fieldset-content .legend-foreign-part {
margin: 2px;
background-color: lightgray;
.s101-fieldset > .s101-fieldset-content .legend-item-horizontal {
margin: 0;
display: inline-block;
.s101-fieldset > .s101-fieldset-content .legend-item-horizontal:not(:last-child) {
margin-right: 2px;

<div class="s101-fieldset">
<div class="s101-fieldset-content">
<div class="legend-item legend-national-part legend-item-horizontal">National part</div>
<div class="legend-item legend-local-part legend-item-horizontal">Local part</div>
<div class="legend-item legend-foreign-part legend-item-horizontal">
Foreign part
<img title="Hey there!" id="foreignPartTooltip" src="http://www.iconsdb.com/icons/preview/royal-blue/info-xxl.png" class="icon16" />

Answer Source

That's because the h1 is on the top. You need to set the z-index of the .s101-fieldset-content div, instead of the img. Or you can set position: relative; to the .s101-fieldset-content div, and it will be o top of the h1.

Here you have the working code

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download