html - 使用 float 在 asp.net 中出现重叠 div 的问题

Question

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 索引并将行向左浮动。为什么它们不重叠？

Answer 1

您需要将外部 div 的位置设置为相对位置，将内部位置设置为绝对位置，才能使 z-index 正常工作。

之后，所有内部 div 的bottom、top、left 和right 值将定位div根据外层div。使用 bottom:0 可以将线粘贴到外部 div 的底部。为此，您必须删除 ma​​rgin-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/