html - CSS 悬停在较低元素的后面

Question

我遇到了一系列表单的情况，其中我在输入框上有一个悬停提示。在少数情况下，悬停元素会换行到第二行，并向下“覆盖”其下方的下一个表单元素。问题是悬停元素实际上最终落在输入框下方而不是上方，这有点违背了目的。

如有任何帮助，我们将不胜感激。

这是 HTML:

地址1: "id="地址1"/> 您的街道地址。

<div class="field">
  <label for="address2">Address2:</label>
  <input type="text" class="input" name="address2" value="<?php if ($row_GuestLookup['customer_fname']) { echo $row_GuestLookup['address2']; } ?>" id="address2" />
  <p class="hint">Any extra street address information if necessary.</p>
</div>

<div class="field">
  <label for="city">City:</label>
  <input type="text" class="input" name="city" value="<?php if ($row_GuestLookup['customer_fname']) { echo $row_GuestLookup['city']; } ?>" id="city" />
  <p class="hint">Your city.</p>
</div>

这是相关的 CSS。

#defaultform {
 width: 600px;
 margin-left: auto;
 margin-right: auto;
 padding: 20px;
 background: #f0f0f0;
 overflow:auto;

 /* Border style */
 border: 1px solid #cccccc;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 border-radius: 7px;

 /* Border Shadow */
 -moz-box-shadow: 2px 2px 2px #cccccc;
 -webkit-box-shadow: 2px 2px 2px #cccccc;
 box-shadow: 2px 2px 2px #cccccc;

}
.hint{
  display: none;
}

.field {
  position: relative;
  height: 30px;
}

.field:hover .hint {
  position: absolute;
  display: block;
  margin: -30px 0 0 375px;
  color: #FFFFFF;
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.6);

  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}

Answer 1

更改 z-index你的提示类是这样的:

.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 375px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
z-index:10000;

-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}

编辑: 您可能希望使用与 10000 不同的值。我只是出于说明目的使用它。