CSS笔记：12.定位

定位

定位：手动控制元素在包含块中的精准位置。
属性：position

position属性

• 默认值：static，静态定位（不定位）
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位
  一个元素，只要position的取值不是static，认为该元素是一个定位元素。
  定位元素会脱离文档流（常规流），相对定位除外。

脱离文档流的元素特点：

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

相对定位relative

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。
通常用于为绝对定位提供包含块。
可以通过四个css属性设置其位置：

• left：整体向右边移动，左边空出位置，整体宽度不变，会突出原来的包含块。
  margin-left：左边空出位置，但整体宽度变小了，不会突出包含块。
• right：整体向左移动，右边空出位置，但整体宽度变小了，不会突出包含块。
• top：整体向下移动，是相对于原来上边框的偏移量。
• bottom：整体向上移动，是相对于原来下边框的偏移量。

盒子的偏移，不会影响其他盒子。
有矛盾时，以左边、上边为准。

绝对定位absolute

1. 宽高为auto，适应内容。
2. 包含块：找祖先元素中第一个定位元素（先找父元素，再找父元素的父元素，···），该元素的填充盒为其包含块。如果找不到，则它的包含块为整个网页（初始化包含块）
   绝对定位元素一定是块盒

固定定位fixed

1. 宽高为auto，适应内容。其他情况和绝对定位完全一样。
2. 包含块：固定为视口（浏览器的可视窗口）
   固定定位元素一定是块盒

定位下的居中

绝对定位
某个方向居中

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

    position：fixed;
    width:100px;
    height:100px;
    left:0;
    right:0
    top:0;
    bottom:0;
    margin:auto;

在固定定位、绝对定位中，margin为auto时，会自动吸收剩余空间。可以上下左右居中。
常规流只能左右居中。

多个定位元素层叠时

堆叠上下文
设置z-index,通常情况下，该值越大，越靠近用户。
只有定位元素设置z-index有效。
z-index可以为负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖。

绝对定位、固定定位元素一定不是浮动，没有外边距

半透明

每个颜色都具有透明通道，0~1.0指完全透明，1指完全不透明。

1. rega(红,绿,蓝,alpha)
2. hex:#红绿蓝透