CSS 定位
定位
- 视觉格式化模型,大体上将页面分为三种方式:
-
常规流
-
浮动:float
-
定位:position
- 定位:手动控制元素在包含块中的精确位置
- 涉及的css属性:position
position
-
默认值:static,静态定位(不定位)
-
relative:相对定位
-
absolute:绝对定位
-
fixed:固定定位
-
一个元素,只要position的取值不是static,认为该元素时一个定位元素
-
定位元素会脱离文档流(相对定位除外)
-
一个脱离了文档流的元素:
- 文档流中的元素拜访时,会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时,会忽略脱离了文档流的元素
相对定位
-
不会导致元素脱离文档流,只是让元素在原来位置上进行偏移
-
可以通过四个css属性设置其位置:
- left
- right
- top
- bottom
-
盒子的偏移不会对其他盒子造成影响
-
上下或者左右矛盾时以上左为主
绝对定位
- 宽高为auto时,适应内容
- 包含块变化:从父元素依此向上寻找至第一个定位元素,该元素的填充盒为其包含块。若找不到,则整个网页就是它的包含块(初始化包含块)(填充盒为内容加padding)
固定定位
- 其他情况盒绝对定位完全一样
- 包含块不同:固定为视口,可视窗口
定位下的居中
- 某个方向居中:
- 定高(宽)
- 将左右(上下)设置为0
- 将左右(上下)margin设置为auto
- 绝对定位和固定定位中margin为auto时,会自动吸收剩余空间
- Eg:
- left:0;
- right:0;
- top:0;
- bottom:0;
- margin:auto;
多个定位元素重叠时
- 堆叠上下文
- 设置z-index,通常情况下,该值越大越靠近用户
- 只有定位元素设置z-index有效
补充
- 绝对定位,固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并
- 绝对定位、固定定位元素要设置宽度
本文来自博客园,作者:懒惰ing,转载请注明原文链接:https://www.cnblogs.com/landuo629/p/12434286.html