CSS温习回顾—CSS定位

CSS温习回顾

CSS定位

1. 定位简介

—定位是一种比较高级的布局，一般大布局用float浮动，细节精修用position定位；

—通过定位可以将一个元素摆放到页面的任意位置；

—使用position属性设置定位；

​ —可选值

​ static： 默认值，元素静止，没有开启定位；

​ relative ：开启元素的相对定位；

​ absolute ：开启元素的绝对定位；

​ fixed ：开启元素的固定定位；

​ sticky：开启元素的粘滞定位；

2. 相对定位

—当元素的position属性值设置为relative，开启了元素的相对定位；

—相对定位的特点：

​ —元素开启相对定位后，不设置偏移量，元素不会发生任意变化；

​ —相对定位，是参照元素本身在文档流中的位置；

​ —相对定位会提高元素的层级；

​ —相对定位不会使得元素脱离文档流；

​ —相对定位不会改变元素性质，块元素还是块元素，行内元素还是行内元素；

—偏移量：当元素开启了定位，可以通过偏移量设置元素的位置；

top： 定位元素和定位位置的上边的距离（垂直方向）top值越大，定位元素越向下移动；

bottom ：定位元素和定位位置下边的距离（垂直方向）bottom值越大，定位元素越向上移动；

定位元素垂直方向的位置由 top 和bottom 进行控制；通常情况下，两者使用其中一个；

left 定位元素和定位位置左边的距离（水平方向）left值越大，定位元素越向右移动；

right 定位元素和定位位右边的距离（水平方向）right值越大，定位元素越向左移动；定位元素水平方向的位置由left和right 进行控制，通常情况下，两者使用其中一个；

—偏移量和margin的区别：

偏移量只有在设置定位的元素下才会生效；并且设置偏移量不会影响其他未开启定位（未设置偏移量的元素）而margin会影响其他元素；

3. 绝对定位

—当元素的position属性值设置为absolute时，开启了元素的绝对定位；绝对定位在开发中较多使用；

—绝对定位的特点：

—开启元素的绝对定位，如果不设置偏移量，元素的位置不会发生变化；

—开启绝对定位后，元素会从文档流中脱离；

—绝对定位会改变元素的性质，行内变成块元素，块的宽高被内容撑开；

—绝对定位会使元素提升一个层级；

—绝对定位元素是相对于其包含块进行定位的；

—包含块（containing block）

​ —文档流中正常情况下，包含块就是离当前元素最近的祖先块元素；

​ —开启绝对定位情况下：包含块就是离当前元素最近的开启定位的祖先元素；

​ —如果所有元素均未开启定位，则根元素就是其包含块（html 根元素，初始包含块）

绝对定位元素的布局

水平方向布局

当开启了绝对定位以后，水平布局发生变化：

left + margin-left + border-left +padding-left + width + padding-right + border-right + margin-right+ right =包含块内容区宽度

水平方向的布局等式需要添加 left 和 right两个值，当发生过度约束时，此时规则和之前一样；

—九个值没有auto，则自动调整right值以使等式成立；

—如果有auto则自动调整auto值，使得等式满足；

​ 可以设置auto值的有：margin-left、width、margin-right、left、right；

—因为left 和 right 的值默认是auto，如果left 和 right值不指定，过度约束时，自动调整left 和 right两个值；

设置水平居中：

<style>
 div{
     position:absolute;
     /*必须指定left和right值才可以保证margin有效*/
     left:0;
     right:0;
     margin:0 auto;
 }
</style>

垂直方向布局

top + margin-top + border-top +padding-top +height +padding-bottom +border-bottom + margin-bottom + bottom=包含块的高度

上述等式必须满足；可以利用上述等式设置垂直居中；

设置垂直居中：

<style>
 div{
     position:absolute;
     /*必须指定top和bottom值才可以保证margin有效*/
     top:0;
     bottom:0;
     margin:auto 0;
 }
</style>

4. 固定定位

—将元素的position属性值设置为fixed，则开启了元素的固定定位；

—固定定位也是一种绝对定位，其大部分特点与绝对定位相同（特殊的绝对定位）；

—固定定位永远参考浏览器的视口进行定位；

​ 视口，浏览器的可视窗口，固定不动的；

—固定定位的元素不会随着网页的滚动条而移动；

固定定位的水平布局

固定定位是相对于视口的，并且窗口大小变化会引起定位位置的变化，因此想要改变固定定位的水平位置，不能直接改变right和left值；

由于水平布局的等式在设置固定定位后变为：

left +margin-left + border-left + padding-left +width + padding-right + border-right + margin-right + right =视口的宽度

以设置右边固定定位为例，当设置了right，宽度固定，left为默认auto值，其他为0，此时随着窗口的变化，left会自动调整，因而固定定位的位置会随着窗口的移动而变化；

如何解决：

—将right设置为视口宽度的50%，他不会跟随视口的宽度变化而移动，永远在中间位置；

—现在需要将固定定位元素移动到右边，即可以通过增大左边的距离，但是不能设定给left，因为它也会随着窗口而改变，因此可以通过减少margin-left或者margin-right的值；

—**！！！但是设置margin-left，元素的位置不会发生变化，因为它和left的作用相当于一样的！！！**因此只能减少margin-right值；

5. 粘滞定位

—当元素的position设置为sticky属性值，则开启了元素的粘滞定位；

—粘滞定位和相对定位的特点基本一致；

—不同的是，粘滞定位可以在元素到达某个位置时候，将其固定；

—其相对于body包含块；开发中很少使用；

6. 元素层级

—对于开启了定位的元素，可以通过z-index属性，指定元素的层级；

—z-index需要一个整数作为参数，值越大，元素层级越高，越优先显示；

—如果元素的层级一样，则优先显示靠下的元素（即结构上最下面的元素）；

—祖先元素的层级再高，也不会盖住后代元素；