Question

我遇到以下问题：我的.line div在.list div上方，我不明白为什么。我没有通过z-index定义任何新的堆叠上下文，所以难道堆叠顺序不应仅由HTML中的出现顺序来定义吗？还是在我看不见的情况下还有其他东西定义了一个新的堆栈上下文？

感谢一堆

body {
    font-family:helvetica, sans-serif;
}

.line {
    background-color:red;
    height: 150px;
    width:1px;
    float:left;
    position: relative;
    left: 57px;
    top:20px;
}

.list {
    list-style-type:none;
    display: inline-block;    
}

.written {
    width:200px;
    position: relative;
    top: 5px;
    
}

.dot {
    border: 1px solid blue;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    float:left;
    margin: 5px;
}

<html>
    <head>
        <link href="./style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div class=line>
        </div>
        <ul class=list>
            <li>
                <div class=dot>
                </div>
                <p class=written>First thing</p>
            </li>
            <li>
                <div class=dot>
                </div>
                <p class=written>Second thing</p>
            </li>
            <li>
                <div class=dot>
                </div>
                <p class=written>Third thing</p>
            </li>
        </ul>
    </body>
</html>

Answer 1

来自the CSS 2 specification。

步骤4：对于所有流入的，未定位的，块级的树状后代

第8步：所有定位的后代，其树序为“ z-index：自动”或“ z-index：0”。

<ul class=list>在步骤4绘制。<div class=line>在步骤8绘制，即在顶部。

Answer 2

由于<div class=line>的属性，您的<ul class=list>位于position:relative;的上方。如果您将其添加到.list选择器中，您的<ul class=list>将排在最前面！在此处查看示例：https://jsfiddle.net/Lsq0tc12/

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 3

尝试此代码。

body {
    font-family:helvetica, sans-serif;
}

.line {
    background-color:red;
    height: 150px;
    width:1px;
    float:left;
    position: relative;
    left: 57px;
    top:20px;
}

.list {
    list-style-type:none;
    display: inline-block;    
}

.written {
    width:200px;
    position: relative;
    top: 5px;
    
}

.dot {
    border: 1px solid blue;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    float:left;
    margin: 5px;
}

.list > li {
  margin-left: -56px;
}

<html>
    <head>
        <link href="./style.css" type="text/css" rel="stylesheet">
    </head>
    <body>                
        <div class=line>
          <ul class=list>
            <li>
                <div class=dot>
                </div>
                <p class=written>First thing</p>
            </li>
            <li>
                <div class=dot>
                </div>
                <p class=written>Second thing</p>
            </li>
            <li>
                <div class=dot>
                </div>
                <p class=written>Third thing</p>
            </li>
        </ul>
        </div>
    </body>
</html>

我希望这对您有所帮助。谢谢。

没有z-index的堆叠顺序

3 个答案: