CSS基础之定位

定位

手动控制元素在包含块中的位置
设置的css属性 position

position属性

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

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

一个脱离了文档流的元素:

1. 文档流中的元素摆放,会忽略脱离了文档流的元素
   

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

相对定位

position:relative
相对定位不会导致元素脱离文档流, 只是让元素在原来的位置上偏移(即以原来所在的位置为参考点进行偏移,并且原来的元素位会保留),

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

• left
• right
• top
• bottom

盒子的偏移不会对其他盒子造成任何影响, 偏移出现矛盾的时候默认以左 , 上为准, left, top的值为离原来位置的距离

绝对定位

position:absolute
left, top等为离包含块的距离

1. 宽高为auto, 适应内容
2. 包含块会发生变化: 先找祖先元素中的第一个定位元素, 该元素的填充盒为包含块. 若找不到, 则它的包含块为整个网页(初始化包含块)

固定定位

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

包含块不同: 包含快固定为视口(浏览器的可视窗口)—当可是窗口小于初始化网页,则会出现滚动条.

常用来设置广告

定位下的居中

某个方向居中:

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

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

多个定位元素重叠时

设置z-index,通常情况下,该值越大, 越靠近用户

只有定位元素设置z-index才有效

z-index可以是负数, 如果是负数, 则遇到常规流元素和浮动元素会被其覆盖

补充

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