您的位置：首页 > Web前端 > CSS

绝对定位布局

2017-03-28 22:03 134 查看

position属性设置，能够实现横向多列布局及较为复杂的定位，比如带有遮罩层效果的提示框、固定层效果、全屏广告等。

position拥有3种定位形式：1、静态定位；2、相对定位；3、绝对定位。

position可以设置4个属性值：1、static（静态定位） 2、relative（相对定位） 3、absolute（绝对定位，属于绝对定位） 4、fixed（固定定位，属于绝对定位）

相对定位的特点

1、相对于自身原有位置进行偏移

2、仍处于标准文档流中（占位）

3、随即拥有偏移属性和z-index属性

当元素设置为绝对定位后，元素也会多出两类属性：偏移量属性和 Z-index属性

不同的是：

1.该元素已经脱离了标准文档流（不占位）

2.建立的定位基准不是该元素的原来位置，而是分两种情况

2.1：没有设置偏移量：无论是否存在已定位的祖先元素，都保持在元素初始位置，脱离文档流，宽度塌陷（随内容变化而变化）

2.2：设置了偏移量：又分两种情况（A.无已定位的祖先元素 B.有已定位的祖先元素）

A.无已定位的祖先元素:它会以根节点（<html>）为偏移参照基准

B.有已定位的祖先元素:它会以距其最近的已定位祖先元素为偏移参照基准

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 布局 css position

相关文章推荐

新的分享

章节导航