为什么设置绝对定位元素的兄弟作为位置：相对，使它高于前者？

时间：2018-02-18 06:55:26

标签： html css css3 css-position absolute

HTML 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="c1">
    <div class="c2">
      <div class="circle">
      </div>
      <div class="c3">
        <div class="c4">    
        </div>
      </div>
    </div>
  </div>
</body>
</html>

如果我们将.c3的位置更改为position:relative，如果我们未设置.circle，它会显示在.circle之上，position之下} .c3。为什么会这样？

Link to Jsbin

编辑：澄清

1 个答案:

答案 0 :(得分：2)

.c3位于.circle之后，如果DOM遵循树顺序 .c3在.circle之后。

如果两者都定位并且未指定 z-index ，则.c3将被放置在.circle之上，无论其值是多少职位是：

  1. 亲戚你会有这个：

    2. ＆＃13;
    ＆＃13; 
    body {
  width: 500px;
  height: 500px;
}

.c1 {
  border: 1px solid blue;
  width: 90%;
  height: 90%;
}

.c2 {
  border: 1px solid green;
  width: 90%;
  height: 90%;
}

.c3 {
  border: 1px solid yellow;
  width: 90%;
  height: 90%;
  position: relative;
  background: blue;
}

.c4 {
  border: 1px solid red;
  width: 90%;
  height: 90%;
}

.circle {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  top: 200px;
  left: 350px;
  border-radius: 50%;
}
    ＆＃13; 
    <div class="c1">
  <div class="c2">
    <div class="circle">
    </div>
    <div class="c3">
      <div class="c4">
      </div>
    </div>
  </div>
</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    1. 绝对有这个：

      2. ＆＃13;
      ＆＃13; 
      body {
  width: 500px;
  height: 500px;
}

.c1 {
  border: 1px solid blue;
  width: 90%;
  height: 90%;
}

.c2 {
  border: 1px solid green;
  width: 90%;
  height: 90%;
}

.c3 {
  border: 1px solid yellow;
  width: 90%;
  height: 90%;
  position: absolute;
  background: blue;
}

.c4 {
  border: 1px solid red;
  width: 90%;
  height: 90%;
}

.circle {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  top: 200px;
  left: 350px;
  border-radius: 50%;
}
      ＆＃13; 
      <div class="c1">
  <div class="c2">
    <div class="circle">
    </div>
    <div class="c3">
      <div class="c4">
      </div>
    </div>
  </div>
</div>
      ＆＃13;
      ＆＃13;
      ＆＃13;

      您可以阅读here：

        
          
      1. 堆叠由定位后代形成的上下文与负面   z-index（不包括0）以z-index顺序排列（最多为负数）然后   树顺序。
        2.         

        ...

             
            

        1. 所有定位，不透明度或转换后代，树顺序，属于以下类别：

               
              
          1. 所有定位的后代都带有＆＃39; z-index：auto＆＃39;或者＆＃39; z-index：0＆＃39; ，按树顺序排列。   ...
            2.   
          2.   

        2. 堆叠由具有z-indices的定位后代形成的上下文   z-index顺序大于或等于1（最小的第一个）然后是树   的顺序

          3.   

      因此我们首先考虑z-index，如果相等或未指定，我们会考虑树顺序。

      现在如果.c3 未定位且我们保持.circle 定位，则圈子将高于.c3

      ＆＃13;
      ＆＃13; 
      body {
  width: 500px;
  height: 500px;
}

.c1 {
  border: 1px solid blue;
  width: 90%;
  height: 90%;
}

.c2 {
  border: 1px solid green;
  width: 90%;
  height: 90%;
}

.c3 {
  border: 1px solid yellow;
  width: 90%;
  height: 90%;
  background: blue;
}

.c4 {
  border: 1px solid red;
  width: 90%;
  height: 90%;
}

.circle {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  top: 200px;
  left: 350px;
  border-radius: 50%;
}
      ＆＃13; 
      <div class="c1">
  <div class="c2">
    <div class="circle">
    </div>
    <div class="c3">
      <div class="c4">
      </div>
    </div>
  </div>
</div>
      ＆＃13;
      ＆＃13;
      ＆＃13;

      在这种情况下，我们可以阅读：

        
          

      1. 堆叠由定位后代形成的上下文与否定   z-index（不包括0）以z-index顺序（最先负最大）然后   树顺序。

        2.   

      2. 适用于所有流入，非定位，块级别   树顺序的后代：如果元素是块，列表项或   其他块等价物：

        3.   

      在（3）中我们考虑定位元素具有负z-index且不同于0（.circle不是这种情况）所以我们不打印它然后我们打印我们的流入元素.c3跟随（4）。然后我们会有这个：

        
          
      1. 所有定位，不透明度或变换后代，按树的顺序   分为以下几类：      
            
        1. 所有定位的后代都带有＆＃39; z-index：auto＆＃39;或者＆＃39; z-index：0＆＃39; ，按树顺序排列。 ...
          2.   
        2.   

      现在我们打印.circle，解释为什么在这种情况下圆圈高于.c3。

      如果您为圆圈指定负z-index ，它将落在（3）中，因此它将低于.c3。

      ＆＃13;
      ＆＃13; 
      body {
  width: 500px;
  height: 500px;
}

.c1 {
  border: 1px solid blue;
  width: 90%;
  height: 90%;
}

.c2 {
  border: 1px solid green;
  width: 90%;
  height: 90%;
}

.c3 {
  border: 1px solid yellow;
  width: 90%;
  height: 90%;
  background: blue;
}

.c4 {
  border: 1px solid red;
  width: 90%;
  height: 90%;
}

.circle {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  z-index:-1;
  top: 200px;
  left: 350px;
  border-radius: 50%;
}
      ＆＃13; 
      <div class="c1">
  <div class="c2">
    <div class="circle">
    </div>
    <div class="c3">
      <div class="c4">
      </div>
    </div>
  </div>
</div>
      ＆＃13;
      ＆＃13;
      ＆＃13;

      如果您为.circle指定正z-index ，您将按照（9）而不是（8）进行操作，它将保持在上面：

      ＆＃13;
      ＆＃13; 
      body {
  width: 500px;
  height: 500px;
}

.c1 {
  border: 1px solid blue;
  width: 90%;
  height: 90%;
}

.c2 {
  border: 1px solid green;
  width: 90%;
  height: 90%;
}

.c3 {
  border: 1px solid yellow;
  width: 90%;
  height: 90%;
  background: blue;
}

.c4 {
  border: 1px solid red;
  width: 90%;
  height: 90%;
}

.circle {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  z-index:1;
  top: 200px;
  left: 350px;
  border-radius: 50%;
}
      ＆＃13; 
      <div class="c1">
  <div class="c2">
    <div class="circle">
    </div>
    <div class="c3">
      <div class="c4">
      </div>
    </div>
  </div>
</div>
      ＆＃13;
      ＆＃13;
      ＆＃13;

相关问题
最新问题