我有一个简单的绝对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; }
显然这里是诺亚斯托克斯的DOCUMENT关于css的定位