CSS元素定位

margin-padding位置调整

在标准流中，可以使用margin、padding对元素进行定位
- 其中margin还可以设置负数
比较明显的缺点是
- 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
- 不便于实现元素层叠的效果
如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?
- 我们可以通过position属性来进行设置;

认识position属性

利用position可以对元素进行定位，常用取值有5个:
默认值:
- static：默认值, 静态定位
使用下面的值, 可以让元素变成定位元素(positioned element)
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
- sticky：粘性定位

静态定位 - static

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

相对定位 - relative

元素按照normal flow布局
可以通过left、right、top、bottom进行定位
定位参照对象是元素自己原来的位置
left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
相对定位的应用场景
在不影响其他元素位置的前提下，对当前元素位置进行微调

相对定位练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


  <style>
    body {
      margin: 0;
      padding: 0;
    }


    .box {
      overflow: hidden;
    }


    .box img {
      position: relative;
      transform: translateX(-50%);
      margin-left: 50%;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <img src="../images/mhxy.jpg" alt="">
  </div>


</body>
</html>

固定定位 - fixed

元素脱离normal flow（脱离标准流、脱标）
可以通过left、right、top、bottom进行定位
定位参照对象是视口（viewport）
当画布滚动时，固定不动

画布和视口

视口（Viewport）
- 文档的可视区域
- 如图红框所示
画布（Canvas）
- 用于渲染文档的区域  文档内容超出视口范围，可以通过滚动查看
- 如图黑框所示
宽高对比
- 画布 >= 视口

定位元素的特点

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

绝对定位 - absolut

元素脱离normal flow（脱离标准流、脱标）
可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
定位元素（positioned element）
- position值不为static的元素
- 也就是position值为relative、absolute、fixed的元素

子绝父相

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
- 父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
- 子元素设置position: absolute
- 简称为“子绝父相”

绝对定位练习

绝对定位元素（absolutely positioned element）
- 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
- 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 重置代码 */
    a {
      text-decoration: none;
      color: #333;
    }

    /* 公共的CSS */
    .sprite_01 {
      background-image: url(../images/music_sprite_01.png);
      display: inline-block;
    }

    .sprite_02 {
      background-image: url(../images/music_sprite_02.png);
      display: inline-block;
    }

    .sprite_02_icon_music {
      width: 14px;
      height: 11px;
      background-position: 0 -24px;
    }

    .sprite_02_icon_play {
      width: 16px;
      height: 17px;
      background-position: 0 0;
    }

    /* 布局代码 */
    
  </style>
</head>
<body>
  
  <div class="item">
    <div class="top">
      <img src="../images/music_album01.jpg" alt="音乐封面">
      <a class="cover" href="#"></a>
      <div class="info">
        <i class="sprite_02 sprite_02_icon_music icon-music"></i>
        <span class="count">62万</span>
        <i class="sprite_02 sprite_02_icon_play icon-play"></i>
      </div>
    </div>
    <a class="bottom" href="#">
      天气好的话，把耳机分给我一半吧
    </a>
    <i class="sprite_02 sprite_02_icon_play"></i>
    <i class="sprite_02 sprite_02_icon_music"></i>
  </div>

</body>
</html>

粘性定位 - sticky

另外还有一个定位的值是position: sticky，比起其他定位值要新一些.
- sticky是一个大家期待已久的属性;
- 可以看做是相对定位和固定定位的结合体;
- 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;
- 当达到这个阈值点时, 就会变成固定定位;
sticky是相对于最近的滚动祖先包含视口的(the nearest ancestor scroll container’s scrollport )