CSS笔记（五）position详解&层定位

 

 position：static、relative、absolute、fixed。

绝对定位：absolute 

相对定位：relative

默认值：static

固定定位：fixed

---

 

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

 

 

 

---

 

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

元素没有定义宽度时设置absolute，宽度由元素内容撑开，效果和float的一样。

 

 

---

 

fixed：固定定位，或称为相对于浏览器窗口的绝对定位，脱离文档流。

特点：不会随浏览器窗口的滚动条滚动而变化，总在视线里的元素。

         

---

 

层定位概述：

（1）像图层一样可以对每一个layer进行精确定位操作。

（2）层定位position可以使一个网页元素叠加到另一个网页元素上，外面元素是父层，里面元素是子层。

（3）position属性决定相对于谁定位，设置参照物

fixed  固定定位   relative 相对定位   absolute 绝对定位   

不管参照物是谁，坐标原点始终在参照物的左上角！！！

例如：

 

 

（4）通过一下两种属性定位

①通过position属性设定参照物，通过top、right、bottom、left 设置当前盒子距离参照物的上、右、下、左距离

 

 

②通过z-index属性设定

z-index设置元素的堆叠顺序，越大越在上面。可设为负值（经常设 -1）。 Z-index 仅能在定位元素上奏效（例如 position:absolute;）！默认值是auto，与父元素一致。z-index:auto与z-index:0是不一样的！z-index:0 的会创建一个新的层叠上下文，0 会在auto 上面。

---

 

 

日常使用：

通常设置父元素box1相对定位，position:relative;    设置子元素box2绝对定位，position:absolute;

优点：父元素box1移动时，子元素box2是相对于父元素进行移动的，所以他们两个可以一起被移动。

 

小例子

问：当前有这样一幅图片，要在这个图片上面显示一层文字，要做到使这个文字也需要跟着移动。

答：采用层定位relative+absolute，让div1作为父元素采用相对定位，里面添加图片；然后将文字作为子元素，采用绝对定位。