Javascript html元素悬停在另一个元素上？

如何将一个html元素放在另一个元素的前面，这样当一个特定元素悬停在新元素上时，新元素就会出现在它的前面。 这是我的密码：

<div class="third">
        <label> Enter Password: </label>
        <input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
        <p id="tooltipbox" style="visibility:hidden">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
    </div>

我有一个工具提示，到目前为止，它的工作。但是，当我将鼠标悬停在文本区域上时，它会向下推它下面的元素，以便工具提示可以放在页面上；当我移动鼠标以便“取消悬停”它时，元素会向上重新定位。我想要一种方式当我悬停时，一个消息框被带到前面，下面的所有元素都不会移动。就像您将任何链接悬停在该页面上一样，它们会弹出一个小对话框，该对话框仅在悬停时存在，不会重新定位页面上的其他元素。

您需要指定z索引和位置属性；例如：

p#tooltipbox{
   z-index:1000;
   position:absolute;
   top:0;//move the element to the top of div.third of div.third
   left:0;//if you want to move the element to the left;
}
div.third{
   position:relative;
}

这里有更多的信息

---

我为您创建了一个JSFIDLE。单击以下链接以查看示例：

请参阅上面的链接，但下面是代码：

.fieldarea{ 位置：相对位置； 边框：1px纯红； 宽度：50%； } .fieldarea标签{ 宽度：35%； 显示：内联块； } .现场区域输入{ 宽度：50%； 显示：内联块； } .工具提示框{ 位置：绝对位置； 顶部：0px； 右：0px； z指数：1000； 最大宽度：200px； 边框：1px纯色灰色； 背景颜色：黄色； 不透明度：0； 过渡：不透明度。25秒缓进缓出； -moz过渡：不透明度。25秒缓进缓出； -webkit过渡：不透明度。25秒易入易出； } .fieldarea:悬停。工具提示框{ 不透明度：1； } 输入密码： 密码必须介于8-16个字符之间，包含大写、小写、数字和特殊字符 输入密码： 密码必须介于8-16个字符之间，包含大写、小写、数字和特殊字符

---

您可以使用绝对定位和jQuery。这不是一个完美的例子，而是一个简单的例子

$document.readyfunction{ $'.box1'.hover函数{ $'.box2'.toggleClass'active' } } .包装纸{ 位置：相对位置； 宽度：100px； 高度：100px； 溢出：隐藏； 边框：2件纯黑； 背景色：白色； } .box1{ 宽度：100px； 高度：100px； 位置：绝对位置； 排名：0； 左：0； 背景颜色：蓝色； } .box2{ 宽度：100px； 高度：100px； 位置：绝对位置； 排名：0； 左:100 ;； 背景色：红色； } .主动{ 左：0； }

---

使用绝对定位：

@gknicker谢谢。我会投票但不会回答！如何让我的工具提示慢慢淡入？此刻，它就像你的一样突兀。我也没有使用悬停，所以我不能使用淡入淡出。谢谢，我只是快速搜索了一下。这里有一个例子：我还将更新我的例子，以包括一个例子。工作完美！