html+css----------定位

#定位

视觉格式化模型，大体上将页面中的盒子排列分为三种方式：

1.常规流

2.浮动

3.定位

定位：手动控制元素在包含快中的精确位置，涉及css属性：position

#position属性

-默认值：static，静态定位（不定位）

-relative：相对定位

- absolute ：绝对定位

-fixed：固定定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素。

定位元素会脱离文档流（相对定位除外 ）

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

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

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

#相对定位（relative）

保持盒子原来的属性，原来是浮动还是浮动，

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

-left：相对于原来 盒子最左端的偏移量。

-right相对于原来盒子最右端的偏移量。

-top相对于原来盒子最上端的偏移量。

-bottom相对于原来盒子最下端的偏移量。

盒子的偏移不会对其他任何盒子造成任何影响。

##绝对定位（absolute）

1.宽高为auto，适应内容

2.包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则他的包含块为整个网页。

##固定定位（fixed）

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

包含块不一样：固定定位包含块为视口浏览器的可视窗口）

##定位下的居中

某个方向居中：

1.定宽（高）

2.将左右（上下）距离设置为0

3.将左右（上下）margin设置为auto时，会自动吸收剩余空间。

##多个定位元素重叠时

堆叠上下文

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

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

z-index可以是负数，则遇到常规流、浮动元素，则会被其覆盖

##补充

绝对定位、固定定位元素一定是块盒

绝对定位、固定定位元素一定不能是浮动