关于div+css布局的定位?
时间：2024-02-10 07:20:01 | 来源：网站运营
时间：2024-02-10 07:20:01 来源：网站运营
关于div+css布局的定位?：CSS中定位分五种：static,relative,absolute,fixed；
与定位配合使用的是top,right,bottom,left, 分别指容器相对于上右下做的距离，可以设置为固定值或者百分比。
设置定位后，z-index会生效，设置容器的z轴上的位置
相对定位和绝对定位的应用 图一
1.相对定位 ：容器会脱离文档流，但是容器原本所占有的空间不会消失！相对于自身原本的位置进行偏移 见上图一，是没有设置定位的三个div; 下图是将div2设置了相对定位，top:20px; left:20px; div2相对于以前的位置分别向上和向左偏移了20px,而且把div3的部分遮住了，div3也没有将原本div2的空间占用，我们可以用z-index来这是上下层次，见第2张图图二 图三. 2. 绝对定位：容器会脱离文档流，但是容器原本所占有的空间会消失！ 相对于父容器中第一个设置了定位属性的容器进行偏移图四。 见图四，是三个没有设置定位的div。div1的margin:20px 0 0 20px; 见下图五，div2设置了绝对定位，top:10px;left:10px; 可以看到，div2相对于body向左和向上偏移了10px；这是为什么呢，因为body 的定位为fixed，这个是写死的，不要问为什么！图五。
我们再来进行一个测试，先将div2进行相对定位,left:10px;top:10px; 再将div3进行绝对定位，left:30px;top:30px; 发现div2是相对于它原本的位置进行定位的，而div3此时是相对于div2进行了定位，（见图七） 所以验证了相对定位是相对于自己原本的位置进行偏移，绝对定位是相对于父容器中第一个设置了定位属性的容器进行偏移
然后，比较图六和图七，请仔细看下找到 “div2-2”的问题，初始是在div3容器的下面显示的，div3进行绝对定位后，见图七："div2-2"显示的位置在"div2-1"的后面，div3容器的上面了，所以验证了容器绝对定位后，容器原本所占有的空间会消失！图六。 图七 。
如果还是不明白 容器原本所占据空间会消失！ 这个现象的话，请看下图八,我对div3设置了相对定位，再看看div2-2的位置，明白了吧？
图八。
在线咨询
