Jacob Stamm Jacob Stamm - 4 months ago 9
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

z-index
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">
<h1><span>LEGEND</span></h1>
<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" />
</div>
</div>
</div>




Answer

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