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-indexes并向左浮动。他们为什么不重叠？

Answer 1

您需要将外部div的位置设置为relative，将内部div设置为absolute，以使z-index正常工作。

之后所有的内部divs＆＃39; 底部，顶部，左和右值将根据外部div定位div。使用 bottom：0 ，您可以将线条粘贴到外部div的底部。为此，您必须删除 margin-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;
}

请参阅小提琴，例如：http://jsfiddle.net/vg2rpd7k/

使用float在asp.net中重叠div的麻烦

1 个答案: