2.5.1CSS定位

CSS 定位属性允许对元素进行定位改变其在页面的位置。

CSS 有三种基本的定位机制：普通流、浮动、相对定位和绝对定位。

元素定位的属性：

position:把元素放置到一个静态的、相对的、绝对的、或固定的位置中：

static:（默认值）普通流。

absolute:绝对定位， (相对与最接近的一个有绝对定位设置的父级对象进行绝对定位，如果对象的父元素没有设置定位属性，则依据 body 对象左上角作为参考进行定位)。

relative:相对定位，相对于其正常位置进行定位。

fixed:绝对定位，相对于浏览器窗口进行定位。

sticky:粘性定位，relative与fixed的结合，在滚动事件中，当滚动到顶部时，会有fixed的效果。常用与吸顶效果。

sticky粘性定位生效条件

父元素不能overflow:hidden或者overflow:auto属性
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效

属性值：

top:元素的上外边距与其包含块上边界之间的偏移。
right:元素的右外边距与其包含块上边界之间的偏移。
bottom:元素的下外边距与其包含块上边界之间的偏移。
left:元素的左外边距与其包含块上边界之间的偏移。

clip:设置元素的形状,目前裁切形状只有矩形可以使用。

clip: rect(top, right, bottom, left);

rect()需要设置四个值：top, right, bottom和left。他们之间需要用逗号隔开，而且rect()属性值和margin、padding一样的标准，遵循顺时针旋转的规则。auto（默认值）clip设置auto值和没有进行剪切是一样的效果;

WARNING

clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。

vertical-align:设置元素的垂直对齐方式：（对块元素无效，块元素用margin）

baseline:（默认）元素放置在父元素的基线上。
top:把元素的顶端与行中最高元素的顶端对齐。
middle:把此元素放置在父元素的中部。
bottom:把元素的顶端与行中最低的元素的顶端对齐。
text-top:把元素的顶端与父元素字体的顶端对齐。
text-bottom:把元素的底端与父元素字体的底端对齐。
sub:垂直对齐文本的下标。
super:垂直对齐文本的上标。

z-index:设置元素堆叠顺序-1 0 1 2 3 根据大小一次叠加，数值一样，后来居上。

WARNING

1. 只作用在被定位了的元素上
2. 同一个父元素下的元素的层叠效果会受父元素的z-index影响,如果父元素的z-index值很小,那么子元素的z-index值很大也不起作用

float 定义元素在哪个方向浮动：

left:元素向左浮动。
left:元素向左浮动。
none:（默认值）元素不浮动，并会显示在其在文本中出现的位置。

inset:对应于top、right、bottom、left的简写属性。

inset * 同时设定四个外边距
inset ** 分别设定上下、左右外边距
inset *** 分别设定上、左右、下外边距
inset **** 分别设定上、右、下、左外边距

各定位机制的区别：

普通流：

• 块级元素从上至下、行内元素从左至右一次排列。

浮动：

• 脱离标准流，不占位置，会影响标准流
• 子盒子浮动，不会压住父盒子的padding和margin
• 浮动元素改变元素的模式，无论行内元素还是块元素，设置浮动后都具有行内块元素特性，浮动的元素可以设置宽高，不设置则内容撑开。

TIP

浮动的清除的方法（父元素坍塌）：

• clear:both/left/right/none
• overflow:hidden;（通过BFC方式）
• E:after{content: "";display: block;clear: both;}
• 双伪元素

相对定位：

• 相对定位对象会占据它原来位置
• 相对定位对象不可以层叠

绝对定位：

• 绝对定位对象不会占据它原来位置
• 绝对定位对象可以层叠

TIP

• 常用定位模式：子绝、父相对；

• 居中：父的一半减去自己的一半：

div{
    left:50%;
    top:50%;
    transform:translate(-50%.-50%);
    /*或*/
    margin-left:width/2;  /*宽度的一半*/
    margin-top:height/2;  /*高度的一半*/
}