Question

在this example of a legend中，我有一点＆＃34;信息＆＃34;将鼠标悬停在工具提示上时将用于工具提示的图像。但是，即使我将图像的z-index设置为非常高的数字，其他元素似乎也会堆叠在图像的顶部。如何才能将图像堆叠在顶部以便我的工具提示正常工作？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

Here您有工作代码

如何在h1前面创建一个img堆栈？

2 个答案: