html布局：定位position使用技巧

来源：互联网发布：centos和linux的区别编辑：程序博客网时间：2024/05/14 09:32

布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，今天我们就说说定位在布局中的使用技巧和注意事项。

position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位--相对于浏览器窗口）。

1.position:relative

生成的位置相对于自身定位的，需要注意的是使用position:relative的元素并没有脱离文档流，且原来的位置占用的空间依旧存在，只是位置发生了变化。一般使用relative来改变位置比较少，主要是用来设置子级的absolute定位的参考对象。

2.position:absolute

absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父（父...)级来定位；如果父级都没有position属性，则相对于document来定位；使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用绝对定位和浮动的。

<style type="text/css">#box {background-color: grey;position: relative;padding: 20px;}#child {height: 200px;width: 200px;background: red;position: absolute;left: 100px;top: 100px;}</style></head><body><div id="box"><span id="child">hello world</span></div></body>

可以看到在对子级span标签absolute定位之后，可以设置宽高，且父级无法检测到子级宽高，所以无法有子级来撑开；

3.position:fixed

fixed定位是相对于浏览器窗口来定位的，所以也是脱离了文档流，与absolute一样，父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用fixed定位和浮动的。

z-index属性：

使用定位后的元素都会有z-index属性，同级定位元素这个值越大，其显示越靠前。这项属性需要注意的是比较时是同级定位元素进行比较。

<style type="text/css">#box {height: 400px;width: 400px;background-color: grey;position: absolute;z-index: 1;}#child {height: 50%;width: 50%;background: red;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 10;}#box2{position: absolute;height: 200px;width: 200px;background: green;z-index: 2;}#child2{height: 50%;width: 50%;background: yellow;position: absolute;left: 50%;top: 50%;z-index: 8;}</style></head><body><div id="box"><div id="child"></div></div><div id="box2"><div id="child2"></div></div></body>

当两个拥有子元素的父级元素（绿色和灰色DIV）重叠时，层级高的父元素（绿色DIV）里的子元素（黄色DIV）永远在上层，即使层级底的父元素（灰色DIV）里的子元素（红色DIV）z-index的值较大。

关于布局中定位的使用就简单介绍到这里，若有错误和好的补充欢迎讨论，谢谢！

0 0