CSS定位

目录

position

相对定位

绝对定位

固定定位

定位下的居中

多个定位元素重叠时

补充


手动控制元素在包含块中的位置

position

  • 默认值:static,静态定位(不定位)
  • relative:相对定位
  • absolute:绝对定位
  • fixed:固定定位

一个元素,只要position的取值不是static,认为该元素是一个定位元素,定位元素会脱离文档流(相对定位除外)一个脱离了文档流的元素:

  1. 文档流中的元素摆放时,会忽略脱离了文档流的元素
  2. 计算自动高度时,会忽略脱离了文档流的元素

相对定位

不会导致元素脱离文档流,只是让元素在原来位置上进行偏移

可以通过四个css属性设置其位置

  • left
  • right
  • bottom
  • top

盒子的偏移不会对其他盒子做出任何影响,尽量设置两个不矛盾的值,如果设置后以左上的为准

绝对定位

  1. 盒模型宽高为auto,盒子尺寸适应内容
  2. 包含块变换:找祖先元素中第一个定位元素,该元素的填充盒为其包含块,若找不到,则他的包含块是整个网页(初始化包含块)

固定定位

包含块不同:固定定位为视口(可视化窗口)

其他情况和绝对定位完全一样

定位下的居中

某个方向居中:

  1. 定宽(高)
  2. 将左右(上下)距离为0
  3. 将左右(上下)margin设置为auto

绝对定位和固定定位中,margin为0,会自动吸收剩余空间

多个定位元素重叠时

设置z-index,通常下,该值越大,越靠近用户,只有定位元素才有效

补充

  • 绝对定位,固定定位一定是块盒
  • 绝对定位,固定定位一定不是浮动
  • 没有外边距合并

你可能感兴趣的:(css,前端)