定位与定位属性的层级
Posted chen-tan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了定位与定位属性的层级相关的知识，希望对你有一定的参考价值。
/*方位值 top bottom距离参考对象底部的距离 left right 支持负值*/
<!doctype html> <html> <head> <title>定位</title> <style> *{margin:0;padding:0;} .box{position:fixed;/*使其不影响其他布局 postion 设置定位的属性 fixed 固定定位 参考对象是窗口 */ top:200px; background:red; width:200px; height:200px;} p{width:800px; /*height:800px;*/ border:5px solid red; } </style> </head> <body> <div class="box"> dsnaad </div> <p> </p> <p> </p> <p> </p> </body> </html>
relative 相对定位
1.不会改变元素本身的特性
2.以自身为参考对象
3.相对定位不给方位值和普通元素一样
4.给定方位值，原位置仍保留，也不会影响其他元素的布局
absolute 绝对定位
1.会让元素脱离文档流
2.可以设置参考对象，默认是body为参考对象
3.给直系父级添加position属性，并且值不为sattic可 以设为参考对象(static为默认值)
4.脱离文档流
5.会改变元素特性，变为块级
a.不会独占一行
b.宽度默认为0
<!doctype html>
<html>
<head>
<title>层级</title>
<style>
ul,li{padding:0;list-style:none;}
ul{ position:relative; width:500px;background:red;}
li{ width:100px; height:100px; font-size:50px; text-align:center; border:2px solid; }
.l1{ position:absolute; background:blue; }
.l2{ z-index:1;/*支持负值 会在所有元素之下*/ position:absolute; width:150px; height:150px; background:red; }
.l3{ position:absolute;width:200px; height:200px; background:yellow; }
</style>
</head>
<body>
<ul>
<li class="l1">1</li>
<li class="l2">2</li>
<li class="l3">3</li>
<!-- 定位元素的层级 默认后面的比前面的高
z-index 设置非static值的定位元素的层级
auto 默认 自动
一般直系比较
</ul>
</body>
</html>
以上是关于定位与定位属性的层级的主要内容，如果未能解决你的问题，请参考以下文章