如何在 h1 前面制作 img 堆栈？

Question

在 this example of a legend 中，我有一个小 "info" 图片，当您将鼠标悬停在它上面时，它会用作工具提示。然而，其他元素似乎堆叠在图像之上，即使我将图像的 z-index 设置为非常高的数字。我怎样才能使图像堆叠在顶部，以便我的工具提示正常工作？

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 1

那是因为 h1 在上面。您需要设置 .s101-fieldset-content div 的 z-index 而不是 img。或者您可以将 position: relative; 设置为 .s101-fieldset-content div，它将位于 h1.

的顶部

Here 你有工作代码

Answer 2

您的 <h1> 标签的位置覆盖了它下面的块。我建议您使用 legend html tag，因为它是为此目的而创建的：

.icon16 {
    width: 16px;
    height: 16px;
    border: 0px;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    vertical-align: top;
    cursor: help;
}

.s101-fieldset legend {
    font-size: 12px;
    margin: 0 auto;
    background: #fff;
}

.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">
    <fieldset>
        <legend align="center">
            LEGEND
        </legend>
        <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 id="foreignPartTooltip" src="http://www.iconsdb.com/icons/preview/royal-blue/info-xxl.png" class="icon16" />
            </div>
        </div>
    </fieldset>
</div>

如何在 h1 前面制作 img 堆栈？

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

html

css

z-index