Fork me on GitHub

CSS position详解

基本思想

定位(position)允许定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
使用top,bottom,left,right属性的属性值来设置元素的位置。

作用

  • 在正常情况下,可以让一个元素覆盖在另外一个元素上面
  • 可以移动一个元素的位置
  • 可以固定某个容器在浏览器窗口的某个位置不动
  • 可以做吸顶效果,比如百度新闻的导航

五种定位方式

1、静态定位 static

  默认值。没有定位,元素出现在正常的页面流中(忽略 top, bottom, left, right 或者 z-index 声明)
  如果省略position属性,浏览器就认为该元素是static定位

2、相对定位 relative

  • 如果没有定位偏移量,对元素本身没有任何影响
  • 不使元素脱离文档流
  • 不影响其他元素布局
  • 移动位置的时候参照物是当前元素自身(初始位置的左上角)
  • 多个元素相对定位之后,如果没有移动位置,那么他们之间就不会覆盖现象。如果移动了位置,那么后面的元素就是会覆盖前面的元素(可以通过z-index改变层叠顺序)

没有使用相对定位时:在这里插入图片描述
效果:在这里插入图片描述
此时给第二个div添加相对定位的声明:在这里插入图片描述
效果:在这里插入图片描述
第二个div则相对于初始的位置向左、向下分别移动50px。
注意:其原先的位置还是会保留的,也就是未脱离文档流。

3、绝对定位 absolute

  • 元素脱离文档流
  • 使内联元素支持宽高
  • 使块元素默认宽根据内容决定
  • 如果祖先元素有定位(绝对、相对、固定),则相对于祖先元素发生偏移;祖先元素没有定位,则相对于整个文档(左上角)发生偏移
  • 如果多个元素同时给了绝对定位,他们之间的层叠顺序是,结构在后的元素在最上面.(可以通过index改变层叠顺序)

不使用绝对定位:在这里插入图片描述
效果:在这里插入图片描述
此时给最外层的父元素div添加相对定位(也可以是绝对、固定),给第二个子元素添加绝对定位:在这里插入图片描述
效果:在这里插入图片描述
很明显可以看到第二个div此时移动的参照物是添加了相对定位的父元素,而且脱离了文档流(处于正常文档流的第三个div上去了)
注意点:浮动也会使元素脱离文档流,但是被浮动元素覆盖的元素,若里面有文字内容,那么文字则会环绕浮动元素周围显示。而被绝对定位元素覆盖的元素,里面的文字便会被全覆盖,不会环绕显示

4、固定定位 fixed

  • 脱离文档流
  • 使内联元素支持宽高
  • 使块元素默认宽根据内容决定
  • 相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响
  • 多个元素同时给了固定定位,结构上后面的元素会盖在最上面,固定定位的层叠顺序也可以用z-index改变

常用于右下角“返回顶部”、弹窗等。
不使用固定定位:在这里插入图片描述
效果:在这里插入图片描述
此时给红色边框的div添加固定定位:在这里插入图片描述
效果:在这里插入图片描述
很明显可以看到固定定位的元素的参照物是整个浏览器窗口,而且也是脱离的正常的文档流(处于正常文档流的蓝色边框div上去了),之后该元素就固定在这个位置了,拖动窗口的时候,不再改变。

5、粘性定位 sticky

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative),之后为固定定位(fixed)。
常用于用于页面滚动的时候的定位,可以方便实现吸顶条的效果;表格的表头锁定;堆叠效果等
例如:百度新闻的导航栏在这里插入图片描述
当向下拖动滚动条的时候,导航栏就会固定在顶部在这里插入图片描述
注意:

  • 父元素不能overflow:hidden或者overflow:auto属性。
  • 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
  • 父元素的高度不能低于sticky元素的高度
  • sticky元素仅在其父元素内生效
posted @ 2020-03-29 13:51  远行行  阅读(622)  评论(0编辑  收藏  举报