CSS之Position

126 阅读2分钟

什么是position?

position全称是Positioned Layout Module,是提供与元素定位和层叠相关功能,它是核心模块。

position有五种定位模式:

一,static又称为静态定位/常规定位/自然定位。

它的作用是使元素定位于常规/自然流中。(按照自然的布局模式:行内元素水平方向从左向右排列,块级元素垂直方向向下排列。)

特点:

1.设置后,会忽略top,left,right,bottom或z-index的声明。

2.两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的。

3.具有固定宽高的元素,如果把左右外边距设置auto,则左右外边距会自动扩大占满剩余宽度。效果是这个块会水平居中。


二,relative称为相对定位。作用是使元素成为containing-block,即可定位的祖先元素。

特点:

1,可以使用left,top,right,bottom,z-index进行相对定位。

2,相对定位元素不会离开常规流。意思是即使偏移了它本来的位置不会消失。

3,任何元素都可以设置为relative,它的绝对定位的后代可以对它进行绝对定位。

4,可以使浮动元素发生偏移,并控制它们的堆叠顺序。(把方向属性改为负数并设置z-index实现堆叠)


三,absolute绝对定位

作用使元素脱离常规流。

特点:

1,脱离常规流。意思是设置后,不再留原来的位置。

2,设置百分比是根据最近定位祖先元素来做。

3,四个方向(left,right...)设置为0,它将对齐到最近定位祖先元素的各边。

4,四个方向设置为auto,就会打回原形。

5,如果没有最近定位祖先元素,会为<body>为参照。

6,z-index可以控制堆叠顺序。


四,fixed固定定位。

特点:

fixed跟absolute一模一样,就是多了个视口固定的特性,就是随着滚动条滚动,能一直能看到这个元素。


五,sticky称为磁贴定位/粘性定位/吸附定位。作用:relative+fixed完美结合,制造出吸附效果。

特点:

1,如果产生偏移,原位置还是会在常规流中。

2,如果它最近祖先元素有滚动,那么它的偏移标尺就是最近的祖先元素。

3,如果最近祖先元素没有滚动,那么它的偏移标尺是视口。

4,上下左右的偏移规则。