#

标准流

默认情况下元素都是按照 normal flow(标准流，常规流)进行排布的，从左到右，从前到后按顺序摆放好，默认情况下互相之间不存在层叠现象

标准流中使用 margin/padding 调整位置

在标准流中可以使用 marign, padding 对元素进行定位，其中 margin 可以设置为负数

缺点

• 设置一个元素的 margin 或者 padding 通常会影响到标准流中的其他元素的定位效果
• 不便于实现元素的层叠效果

元素定位

元素定位允许从正常的文档流布局中取出元素，并使其具有不同的行为

• 例如放在另一个元素的上面
• 或者始终保持在浏览器视窗内的同一位置

position 属性

可以使用 position 属性对元素进行定位，常用的值有 static, relative, absolute, sticky, fixed
默认值是static默认是静态定位

使用下面的值可以让元素变成定位元素

• relative: 相对定位
• absolute: 绝对定位
• fixed: 固定定位
• sticky: 粘性定位

static -- 静态定位

static是 position 属性的默认值，元素按照 normal flow 布局， left, right, top, bottom 没有任何作用

relative -- 相对定位

• 相对定位下元素按照标准流布局
• 可以通过设置 left, right, top, bottom 进行定位，定位的参照对象是元素自己原来的位置
• left, right, top, bottom 用来设置元素的具体位置
• 相对定位的应用场景---- 在不影响其他元素位置的前提下，对当前元素位置进行微调

relative 案例

图片在容器中居中显示

• 方案一，使用背景图片的方式实现

.box {
  height: 489px;
  background: url("../img/mhxy.jpg") center;
}

• 方案二 容器中使用 img 标签，通过相对定位实现
  

  原理:

1. 元素本身向左移动自身宽度的一半
2. 再向右移动父级容器宽度的一半

<style>
  .box {
    height: 489px;
    overflow: hidden;
  }
  .box img {
    position: relative;
    /* left: -50%; 这里是相对父级容器的百分比，不能使用 */
    /* left: -960px; 方案一, 写死图片宽度的一半, 缺点: 换一张宽度不一致的图片还需要修改值 */
    transform: translateX(-50%);
    margin-left: 50%;
  }
</style>
<div class="box">
  <img src="../img/mhxy.jpg" alt="" />
</div>

fixed --- 固定定位

• 元素脱离标准流
• 可以通过 left, right, top, bottom 进行定位
• 定位参照的对象是视口(浏览器的可视区域)
• 当画布滚动时,元素固定不动

absolute --- 绝对定位

• 元素脱离标准文档流
• 可以通过设置 left, right, top, bottom 进行定位
  • 参照对象是最近的有定位(相对定位/绝对定位/固定定位)的父级元素
  • 如果找不到这样的父级元素,那么参照对象就是视口(浏览器的可视区域)

sticky --- 粘性定位

• sticky可以看作是相对定位和固定定位的结合体
• 允许被定位的元素表现的和相对定位一样，直到它滚动到某个阈值点
• 当到达这个阈值时，就会变成固定定位
• sticky 是相对于最近的滚动祖先包含视口的

<style>
  .title{
    position: sticky;
    top:0; /* 至少设置一个方向，否则不生效，必写， 表示距离顶部0px的时候停住 */
  }
</style>
 <h1>我是标题</h1>
 <div class="title">
   家具， 家电， 电脑， 手机
 </div>
 <ul>
  ......
 </ul>

子绝父相

在绝大多数情况下,子元素的绝对定位都是相对于父元素进行定位的

如果希望子元素相对于父元素进行定位,又不希望父元素脱标,常用的解决方案

• 父元素设置 position: relative (让父元素成为定位元素,而且也不会脱离标准文档流)
• 子元素设置为 position: absolute
• 这种形式简称为 子绝父相

画布和视口

视口

• 文档的可视区域

画布

• 用于渲染文档的区域
• 文档内容超出视口范围,可以通过滚动查询

宽高对比

• 画布 >= 视口

position 的值设置为 absolute/fixed 定位元素的特点

• 可以随意设置宽高
• 宽高的默认值由内容决定
• 不再受标准流的约束
  • 不再严格的按照从上到下,从左到右排布
  • 不再严格区分块级,行内级,块级,行内块级的很多特性都会消失
• 不再给父元素汇报宽高数据

<style>
  .container {
    background-color: red;
  }
  .box {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
    background-color: green;
  }
</style>
<div class="container">
  <div class="box"></div>
</div>

这里 container 盒子的宽度和高度不再被内容撑开

• 脱标元素内部默认还是按照标准流布局
• 绝对定位 position 的值为absolute或者fixed的元素
• 对于绝对定位来说
  • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
  • 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
• 如果希望绝对定位元素的宽度和定位参照对象一样，可以给绝对定位元素设置以下属性
  • left:0; right:0; top:0; bottom:0; margin:0
• 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
  • left:0; right:0; top:0; bottom:0; margin: auto;
• 另外还得设置元素具体的宽高值

绝对定位实现水平垂直居中

<style>
  .container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: red;
  }
  .box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: green;
  }
</style>
<div class="container">
  <div class="box"></div>
</div>

position 值对比

	脱离标准流	定位元素	绝对定位元素	定位参照对象
static	否	否	否	否
relative	否	是	否	元素自己原来的位置
absolute	是	是	是	最近的带有定位的祖先元素，如果没有这样的祖先元素，那么参照对象是视口
fixed	是	是	是	相对于视口

z-index

z-index属性用来设置定位元素的层叠顺序，仅仅对定位元素有效，取值可以是正整数、负整数、0

比较规则

如果是兄弟关系，z-index越大，层叠越在上面；z-index相等，写在后面的那个元素层叠在最上面
如果不是兄弟关系，各自从元素自己以及祖先元素中，找出最邻近的两个定位元素进行比较，而且这两个定位元素必须有设置z-index的具体数值，因此，只要一个定位元素的祖先定位元素层级比其他兄弟元素的层级低，不管该元素的层级有多大，都不会显示在其他元素的层级上面