定位

CSS **position**属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

定位：

  • 定位，是一种更加高级的布局手段
  • 通过定位，可以将元素摆到页面的任意位置
  • 使用position属性来设置定位
    • 可选值：
      • static：默认值，元素是静止的，没有开启定位
      • relative：开启元素的相对定位
      • absolute：开启元素的绝对定位
      • fixed：开启元素的固定定位
        • sticky：开启元素的粘滞定位

定位类型

  • 定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
  • 相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
  • 绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
  • 粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。

大多数情况下，height和width 被设定为auto的绝对定位元素，按其内容大小调整尺寸。

但是，被绝对定位的元素可以通过指定top和bottom ，保留height未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定left 和 right并将width 指定为auto来填充可用的水平空间。

除了刚刚描述的情况（绝对定位元素填充可用空间）：

  • 如果 top 和 bottom 都被指定（严格来说，这里指定的值不能为 auto ），top 优先。
  • 如果指定了 left 和 right ，当 direction设置为 ltr（水平书写的中文、英语）时 left 优先， 当direction设置为 rtl（阿拉伯语、希伯来语、波斯语由右向左书写）时 right 优先。

static

  • 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative

  • 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute

  • 元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed

  • 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

sticky

  • 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

  • 该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见Github issue on W3C CSSWG）。

相对定位

相对定位：

  • 当元素的position属性，设置为relative时，则开启了元素的相对定位
  • 相对定位的特点：
    • 元素开启相对定位后，如果不设置偏移量，元素不会发生任何的变化
    • 相对定位，是参照于在文档流中，原来的位置进行定位的
    • 相对定位会提升元素的层级
    • 相对定位不会使元素脱离文档流
    • 相对定位不会改变元素的性质，块还是块，行内还是行内

  • 应用：

偏移量

偏移量（offset）

  • 当元素开启了定位以后，可以通过偏移量来设置元素的位置
  • 可选值
    • top：定位元素和定位位置上边的距离
    • bottom：定位元素和定位位置下边的距离
      • 定位元素垂直方向的位置，有top和bottom两个属性来控制
        • 通常情况下，我们只会使用其一
        • top值越大，定位元素越向下移动
        • bottom值越大，定位元素越向上移动
    • left：定位元素和定位位置的左侧距离
    • right：定位元素和定位位置的右侧距离
      • 定位元素水平方向的位置由left和right两个属性控制
      • 通常情况下，我们只会使用其一
      • left值越大，定位元素越靠右
      • right值越大，定位元素越靠左

绝对定位

绝对定位：

  • 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
  • 绝对定位的特点：
    • 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
    • 开启绝对定位后，元素会从文档流中脱离
    • 绝对定位会改变元素的性质，行内变成块，块的内容被内容撑开
    • 绝对定位会使元素提升一个层级
    • 绝对定位元素是相对于其包含块进行定位的

包含块

包含块（containing block）

  • 正常情况下，包含块就是离当前元素，最近的祖先元素块
  • 绝对定位的包含块
    • 包含块就是离它最近的，开启了定位的祖先元素
    • 如果所有的祖先元素都没有开启定位，则根元素就是它的包含块
  • html（根元素、初始包含块）

固定定位

固定定位：

  • 将元素的postition属性设置为fixed，则开启了元素的固定定位
  • 固定定位也是一种绝对定位，所以固定定位的大部分特点，都和绝对定位一样
    • 唯一不同的是固定定位，永远参照浏览器的视口进行定位
    • 固定定位的元素，不会随网页的滚动条滚动

粘滞定位

粘滞定位：

  • 当元素的position属性设置为sticky时，则开启了元素的粘滞定位
  • 粘滞定位与相对定位的特点基本一致
    • 不同的是粘滞定位可以在某个元素到达某个位置时，将其固定

绝对定位元素的布局

一般是绝对定位用的比较多，然后对应的，要给合适的父元素开启一个相对定位，使其成为包含块

之前的水平布局的公式，在我们开启了绝对定位后，水平方向的布局等式，就需要添加left和right两个值

此时规则和之前一样，只是多添加了两个值

  • 当发生过渡约束
    • 如果9个值中，没有auto，则自动调整right值以使等式满足
    • 如果有auto，则自动调整auto的值，以使等式满足
  • 可设置auto的值
    • margin
    • width
    • left
    • right
  • 因为left和right的值，默认是auto，等式不满足时，会自动调整这两个值
  • 垂直方向布局的等式，也要满足如上类似等式

垂直水平居中

使用定位，设置水平垂直居中，使其在包含块的中间

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>            .box1 {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        position: relative;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: orange;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        margin-top: auto;
        margin-bottom: auto;
        top: 0;
        bottom: 0;
    }        
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

元素的层级

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

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

  • 如果元素的层级一样，则优先显示靠下的元素

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