Web前端19：定位

定位简介

视觉格式化模型：

1. 常规流
2. 浮动
3. 定位

定位：手动控制元素在包含块中的精准位置。
涉及的CSS属性是position，它有以下取值：

• 默认值static，静态定位，可以认为是不定位
• relative，相对定位
• absolute，绝对定位
• fixed，固定定位

一个元素只要position取值不是static，就认为该元素是一个定位元素。定位元素会脱离文档流（常规流），相对定位除外。

一个脱离了常规流（文档流）的元素，有如下特点：

1. 文档流中的元素摆放时，会忽略脱离了文档流的元素。
2. 文档流中元素计算自动高度时，会忽略脱离了常规流的元素。（如高度坍塌）

相对定位relative

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。
可以通过四个CSS属性设置其偏移量：top、right、bottom、left。
相对定位下盒子的偏移不会对其他兄弟盒子造成任何影响。

<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>

body{
    width: 500px;
}
div{
    height: 50px;
    background: greenyellow;
    border: 2px solid #000;
}
.div2{
    background: blue;
    position: relative;
    top: 30px;
    left: 50px;
}

使用相对定位时应尽量避免同时使用有冲突的值，如top和bottom一起设置，left和right一起设置。

和margin的区别

.div2{
    position: relative;
    left: 50px;
}
.div3{
    margin-left: 50px;
} 

静态定位元素（不定位元素）会因为要撑满包含快，内容宽度会自动减小；而相对定位元素不需撑满包含块，宽度不会减小。

绝对定位absolute

1. 宽高为auto时，盒子尺寸适应内容。
2. 包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）。

<div class="div1">
    <div class="div2">
        <div class="div3">

        </div>
    </div>
</div>

.div1{
    width:1000px;
    height:300px; 
    padding:30px; 
    border: 2px solid;
    position: relative;
}
.div2{
    width:800px;
    height:200px; 
    padding:30px; 
    border: 2px solid;
}
.div3{
    width:100px;
    height:100px;
    background:blueviolet;
    position: absolute;
    right: 0;
    bottom: 0;
}

可以看到绝对定位元素.div3的right和bottom是相对于它的第一个定位祖先元素.div1的包含块而言的。
若去掉.div1的position: relative;，则它的包含块变为整个网页：

绝对定位的应用
如猫眼电影的电影海报，左上角的“2DIMAX”、火花图标就可以用绝对定位。


相对定位的作用通常就是为绝对定位的元素提供包含块。

固定定位fixed

使用方式和绝对定位完全一样，只有一点不同：包含块。
固定定位的包含块固定为视口（浏览器的可视窗口）。
比如当你在浏览器中打开元素审查界面的时候，视口只有这么大：

滚动条会随着视口的大小变化而变化。
固定定位用法示例：

div{
    width:100px;
    height:100px;
    background: blueviolet;
    position: fixed;
    left: 0;
    top: 0;
}

一些烦人的小广告就是这么来的。

固定定位的元素写在哪都无所谓，无论嵌套为子元素嵌套得多么深，它的包含块都是浏览器的视口。

定位元素的居中

某个方向居中：

1. 定宽（水平方向）、定高（垂直方向）
2. 将上下左右距离设置为0
3. 将上下左右margin设置为auto
   绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间。

如上文的固定定位元素：

div{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

多个定位元素重叠时

这涉及到一个叫做堆叠上下文的概念。
设置z-index，把电脑屏幕看作x-y平面，z轴就是垂直于屏幕的轴，正方向指向用户。通常情况下，该值越大，越靠屏幕前方。

<div class="circle1"> </div>
<div class="circle2"> </div>
<div class="circle3"> </div>
<div class="circle4"> </div>
<div class="circle5"> </div>

div{
    position: absolute;
    width: 70px;
    height: 70px;
    border: 5px solid;
    box-sizing: border-box;
    border-radius: 50%;
}
.circle1{
    left: 0;
    top: 0;
    border-color: blue;
    background: blue;
}
.circle2{
    left: 70px;
    top: 0;
    border-color: black;
    background: black;
}
.circle3{
    left: 140px;
    top: 0;
    border-color: red;
    background: red;
}
.circle4{
    left: 35px;
    top: 40px;
    border-color: yellow;
    background: yellow;
}
.circle5{
    left: 105px;
    top: 40px;
    border-color: green;
    background: green;
}

未设置z-index时:

现在设置z-index如下：

.circle1{
  z-index: 5;
}
.circle2{
  z-index: 3;
}
.circle3{
  z-index: 1;
}
.circle4{
  z-index: 4;
}
.circle5{
  z-index: 2;
}

可以看到，从左至右，蓝黄黑绿红，分别被叠在了下层。
只有定位元素设置z-index有效。
z-index可以是负数，如果是负数，则遇到常规流、浮动元素时，会被其覆盖。
如：

.circle1{
  z-index: -1;
}
.circle2{
  z-index: -1;
}
.circle3{
  z-index: -1;
}
.circle4{
  z-index: -1;
}
.circle5{
  z-index: -1;
}

可以用这种方式设置背景图。

补充

• 绝对定位、固定定位元素一定是块盒。
• 绝对定位、固定定位元素一定不是浮动。
• 不存在外边距合并现象。

---