html – 为什么位置绝对渲染在上面位置静态?

前端之家收集整理的这篇文章主要介绍了html – 为什么位置绝对渲染在上面位置静态?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个简单的绝对div和另一个正常的div落后.为什么绝对的div渲染在另一个之上?

我知道我可以用z-index来解决它 – 但原因是什么?

JSBIN:
http://jsbin.com/yadoxiwuho/1

<style>
    .with-absolute {
      position:absolute;
      top:0px;
      bottom:0px;
      background-color:red
    }
    .other {
      background-color:yellow;
    }
  </style>
   </head>
<body>
  <div class="with-absolute">Hello</div>
  <div class="other">Why is this not on top? It comes last</div>
</body>

解决方法

绝对:

这意味着您可以将其放在任何位置,并且不会影响或受流程中任何其他元素的影响.

与静态和相对值不同,绝对定位的元素从正常流中移除.

以下是示例代码

#Box_1 { 
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: #ee3e64;
}
#Box_2 { 
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: #44accf;
}

DEMO作者诺亚·斯托克斯的文件.

显然这里是诺亚斯托克斯的DOCUMENT关于css的定位

猜你在找的HTML相关文章