没有z-index的堆叠顺序[重复]答案

【问题标题】：stacking order without z-index [duplicate]没有z-index的堆叠顺序[重复]
【发布时间】：2018-12-15 05:33:38
【问题描述】：

我面临以下问题：我的.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>

【问题讨论】：

你想在圆圈后面设置垂直线吗？
你想要的结果是什么？
我认为 Oleg 更关注为什么线在点前面结束。
是的，我希望垂直线位于点的后面，但不仅仅是一种解决方法，我真的很想了解为什么它一直在前面，因为我没有看到有这个规则效果:)

标签： html css position z-index

【解决方案1】：

来自the CSS 2 specification。

第 4 步：对其所有流入的、未定位的、块级的后代按树顺序排列

第 8 步：所有具有“z-index：auto”或“z-index：0”的定位后代，按树顺序排列。

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

【讨论】：

非常感谢，看起来很完整，但对我来说有点中国化。是不是因为我的列表没有定位？如果我添加位置：相对；它一直在做同样的事情，所以这不可能吗？是因为我的

【解决方案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

【讨论】：

是的，它没有
是的。将background-color:black; 添加到您的.list 类中，您会看到它隐藏了红线，因此它位于/ 上方。见这里：jsfiddle.net/Lsq0tc12/1
哦，我明白了，非常感谢
不客气，也欢迎来到 Stack Overflow。 =) 如果此答案或任何其他答案解决了您的问题，请将其标记为已接受。

【解决方案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>

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

【讨论】：

嗨，伙计，谢谢，但它不起作用