Css Position


原文链接: Css Position

使用场景

position: relative 一般用于父级元素
position: absolute 一般用于子级元素

position: relative
其相对于父元素进行偏移,并且原本的空间也占据着,下面的元素并不会顶替上去。(所以会发生重叠,但是margin不会)

top/right/left/bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移,
那么margin/padding属性会让该文档空间产生偏移吗,答案是肯定的(会)

position: absolute
absolute元素*定位参考*的是离自身 最近的 具有定位属性 的父级元素
元素设置成absolute后会脱离文档流,并且不占有原本的空间,后面的元素会顶替上去,而且不论元素是行内元素还是块级元素,都会生成一个块级框,也就是例如行内元素span设置了absolute后就可以设置height和width属性了。

position意思为定位。可通过某参考点实现元素的定位,分别有以下属性。

position: relative
元素将以自身为定位的位置作为参考点,通过top/bottom/left/right属性进行定位。一般配合absolute使用,也可使用此属性做居中。
其相对于父元素进行偏移,并且原本的空间也占据着,下面的元素并不会顶替上去

position: absolute
生成BFC,元素将以离其最近并带有position: relative声明的祖先元素的内边作为参考点,通过top/bottom/left/right属性进行定位。可用做菜单栏弹出的选项。
position: fixed
元素将以浏览器窗口为参考点,固定在浏览器页面上,通过top/bottom/left/right属性进行定位。可做为重要功能的按钮或广告。
position: sticky
默认表现与relative,当浏览器页面的顶端与元素的顶端距离相差为top值时,元素固定在浏览器页面顶端。通过top进行定位。可用作导航栏。

使用css布局position非常重要,语法如下:
position:static | relative | absolute | fixed |center | page | sticky

(1)、static
可以认为静态的,默认元素都是静态的定位,对象遵循常规流。此时4个定位偏移属性不会被应用,也就是使用left,right,bottom,top将不会生效。
(2)、relative
相对定位,对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
(3)、absolute
a、绝对定位,对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。
b、元素定位参考的是离自身最近的定位祖先元素,要满足两个条件,第一个是自己的祖先元素,可以是父元素也可以是父元素的父元素,一直找,如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位,通俗说就是position的属性值为非static都行。
(4)、fixed
固定定位,与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。
(5)、center
与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)
(6)、page
与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)
(7)、sticky
对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

`