文档流

默认情况下，文档流(document flow）进行排布，也叫正常正常流（normal flow）。

  • 从左到右、从上到下按顺序摆放好

  • 默认情况下，互相之间不存在层叠现象

视口和画布

视口(Viewport)：文档的可视区域，下图红框区域。

画布(Canvas)：用于渲染文档的区域，文档内容超出视口范围，可以通过滚动查看，下图黑框区域。

画布的宽高大等于视口

17.定位属性 - 图1

定位属性

利用position可以对元素进行定位，常用取值有5个:

static：默认值, 静态定位

relative：相对定位

absolute：绝对定位

fixed：固定定位

sticky：粘性定位

静态定位 - static

  • position属性的默认值,元素按照文档流布局
  • left 、right、top、bottom没有任何作用

相对定位 - relative

开启元素position:relative不会脱离文档流，不会影响周边元素的排布情况。

  • 可以通过left、right、top、bottom进行定位调整位置。

  • 定位参照对象是元素自身。

定位元素

定位元素(positioned elements)：位置属性为 relative, absolute, fixed或 sticky，换句话说，除了默认static 其他任何值，都是定位元素。

固定定位 - fixed

元素脱离文档流,可以通过left、right、top、bottom进行定位。

  • 定位参照对象是视口。

  • 当画布滚动时，固定不动。

绝对定位 - absolute

元素脱离文档流,可以通过left、right、top、bottom进行定位。

  • 一般参照对象是上一级定位元素，如果依次往上找都没有定位元素，那么参照对象是视口。

举例子论证：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.    <style>
  7.     .box {
  8.       width: 300px;
  9.       height: 300px;
  10.       background-color: gray;
  11.     }
  12.     strong {
  13.       position: absolute;
  14.       top: 0;
  15.       right: 0;
  16.       color: #f00;
  17.     }
  18.   </style>
  19. </head>
  20. <body>
  21.   <div class="box">
  22.     <span>我是span元素</span>
  23.     <strong>我是strong元素</strong>
  24.   </div>
  25. </body>

span的父级div没有开启定位元素，所以继续往上找body也不是定位元素，html也不是定位元素，所以最终的参照对象是视口。

运行结果：

17.定位属性 - 图2

position设置为absolute和fixed的特点

  • 脱离文档流，不再严格区分块级、行内级、行内块级，会对周边元素排布情况照成影响。
  • 默认宽高由内容撑开
  • 可以随意设置宽高
  • 不再给父元素汇报宽高数据
  • 脱离文档流元素，内部默认还是按照文档流布局。

如何理解,不再给父元素汇报宽高？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      background-color: #000;
    }
    span{
      color: #f00;
    }
  </style>
</head>
<body>
  <div>
    <span>我是span元素</span>
  </div>
</body>
</html>

（1）没有开启定位元素的情况下,块级元素独占一行，高度由内容撑开。

17.定位属性 - 图3

（2）开启定位元素

    span{
      position: absolute;
      color: #f00;
    }

span设置position: absolute;不向父级汇报宽高，这时div的高度丢失，背景颜色失效。

17.定位属性 - 图4

子绝父相

子元素设置成绝对定位，父元素设置成相对定位，可以让子元素相对于父元素进行定位，父级元素不脱离文档流。

实际开发中很常用

粘性定位 - sticky

  • 可以看做是相对定位和固定(绝对)定位的结合体;
  • 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;
  • 当达到这个阈值点时, 就会变成固定(绝对)定位;

the nearest ancestor scroll container’ S scrollport. 粘性定位是相对于最近的滚动祖先包含滚动视口，滚动视口和viewport不一样。

目前sticky不兼容IE浏览器

z-index属性

z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）。

取值范围，正整数、负整数、0

比较原则

  • 如果是兄弟关系

    • z-index越大，层叠在越上面
    • z-index相等，写在后面的那个元素层叠在上面

  • 如果不是兄弟关系

    • 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
    • 而且这2个定位元素必须有设置z-index的具体数值

公式

定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度

定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

摘自W3C官网:https://www.w3.org（非某w3cschool）

元素水平居中垂直居中

给上一级元素设置相对定位或者绝对定位

参照上一级元素水平居中

 position: absolute;
 left: 0;
 right: 0;
 margin: auto;

参照上一级元素垂直居中

 position:absolute;
 top: 0;
 bottom: 0;
 margin: auto ;

参照上一级元素水平且垂直居中

 position:absolute;
 left: 0 ;
 right: 0 ;
 top: 0;
 bottom: 0;
 margin: auto ;