MENU

css position属性解析

April 18, 2020 • Read: 104 • 技术笔记

一直混淆position这个属性的各个值的作用,每次用都要现场查,用完就忘。此处做一个记录。

position用于指定某个元素的定位类型。元素的定位类型有以下几种:

类型描述
absolute生成绝对定位的元素,相对于 除static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative相对于其正常位置的进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
sticky粘性定位,该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit规定应该从父元素继承 position 属性的值。
initial设置该属性为默认值

fixed和absolute的区别

1、对定位的元素不同:absolute是相对于离它最近的有定位的父元素进行定位(如果没有定位的父元素则相对于浏览器窗口);fixed是相对于浏览器窗口定位。

2、在有滚动条的页面中,absolute会跟随页面滑动,fixed不会滑动,始终固定在同一位置(常见情景如固定位置的小广告)

Last Modified: May 11, 2020