aspx:
<div id="home_tabs" CssClass="home_tabs" runat="server">
<asp:Button ClientIDMode="static" Text="Cures"
ID="cures_btn" CssClass="home_tab" runat="server" onclick="cures_btn_Click" />
<div id="home_tabs_line" CssClass="home_tabs_line" runat="server"></div>
</div>
CSS:
.home_tab
{
vertical-align: top !important;
height: 46px;
padding: 0px 15px !important;
line-height: 46px !important;
background: #cecece !important;
border-radius: 0px !important;
box-shadow: none !important;
color: #000 !important;
border: solid #fff 1px !important;
border-bottom-width: 0px !important;
margin-right: 10px !important;
padding-left: 50px !important;
z-index: 10;
}
.home_tabs_line
{
float: left;
width: 100%;
vertical-align: middle;
height: 1px;
z-index: 0;
margin-bottom: 10px;
}
.home_tabs {
height: 46px;
}
我希望 home_tabs_line 位于 home_tab div 下。我给了他们 z 索引并将行向左浮动。为什么它们不重叠?
最佳答案
您需要将外部 div 的位置设置为相对位置,将内部位置设置为绝对位置,才能使 z-index 正常工作。
之后,所有内部 div 的bottom、top、left 和right 值将定位div根据外层div。使用 bottom:0 可以将线粘贴到外部 div 的底部。为此,您必须删除 margin-bottom 属性或将其值用作 bottom 的值。
CSS:
.home_tab
{
vertical-align: top !important;
height: 46px;
padding: 0px 15px !important;
line-height: 46px !important;
background: #cecece !important;
border-radius: 0px !important;
box-shadow: none !important;
color: #000 !important;
border: solid #fff 1px !important;
border-bottom-width: 0px !important;
margin-right: 10px !important;
padding-left: 50px !important;
z-index: 10;
position: absolute; /*ADDED*/
}
.home_tabs_line
{
background-color: blue;
float: left;
width: 100%;
vertical-align: middle;
height: 1px;
z-index: 0;
/*margin-bottom: 10px;*/ /*DELETED*/
position: absolute; /*ADDED*/
bottom:0; /*ADDED*/
}
.home_tabs {
position:relative; /*ADDED*/
background-color: red;
height: 46px;
}
参见 fiddle ,例如:http://jsfiddle.net/vg2rpd7k/
关于html - 使用 float 在 asp.net 中出现重叠 div 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25902303/