css 定位

2020-12-23  本文已影响0人  占星_fc3b

一、position属性

1.position-static

静态定位、常规定位、自然定位

作用:使元素定位于常规、自然流中

(块、行垂直排列下去、行内水平从左到右)

特点:

忽略top bottom left right 或者 z-index 声明。

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

具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中

2.position-relative

相对定位

作用:

使元素成为可定位的祖先元素

特点:

可以使用 top right botton left z-index进行相对定位

相对定位的元素不会离开常规流

任何元素都可以设置relative,他的绝对定位的后代都可以相对于他进行绝对定位

可以使浮动元素发生偏移,并控制他们的堆叠顺序

3.position-absolute

绝对定位

作用:使元素脱离常规流

特点:

脱离常规流

设置尺寸要注意:百分比比的是最近定位祖先元素

如果没有最近的祖先元素,会默认为body为祖先元素

上下左右如果设置为0,它将对齐到最近定位祖先元素的各一边---衍生出一个居中秒计

上下左右如果设置为auto 它将被打回原形

z-index可以控制堆叠顺序

4.position-fixed

固定定位

固定定位相对于视觉窗口做定位。

固定定位元素不会随着视口滚动而滚动

5.position-sticky

磁贴定位 粘性定位 吸附定位

作用:relavtive与fixed的完美结合,制造出吸附效果

特点:

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

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

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

上下左右的偏移规则

上一篇下一篇

猜你喜欢

热点阅读