定位(position）

admin管理员组

文章数量:1794759

定位(position）

1.定位的使用场景：下拉菜单，二级分类，楼层导航，固定导航栏，文字在图片上显示.....

2.常见定位分为三种：相对定位，绝对定位，固定定位。

（1）相对定位 position:relative;

元素正常占用标准文档流，相对元素自身当前所处的位置来进行定位（位置调整）。如：

给元素添加绝对定位：position: relative;

（2）绝对定位:position: absolute;

         元素脱离文档流（不占位），默认依据浏览器的的左上角来进行定位。如：

给元素添加绝对定位：定位基准默认为浏览器的左上角

注意：元素的绝对定位的定位基准可以通过给它的父元素添加相对定位改变。例如：

 

所以大多数情况下，相对定位是为了给绝对定位的元素做定位基准时使用

（3）固定定位：position: fixed;

         元素使用固定定位后，脱离文档流（不占位），定位基准是浏览器的窗口。

       添加绝对定位后：

 注意！！！

绝对定位和相对定位都会脱离文档流不占位，也就意味着，会覆盖其他的元素。

例如：

图中很明显可以看到box3将box2覆盖了一部分。

本文标签： position