# CSS 定位、层叠顺序、层叠上下文

TIP

在 CSS 中利用 position 属性用于指定一个元素在文档中的定位方式，元素的定位方式有 5 种类型，如下表

定位类型值

属性值	描述
static	没有定位，元素出现在正常的流中（默认值，可以忽略）
relative	相对定位，相对于自身正常位置进行位置的调整
absolute	绝对定位，相对于其最近的定位的父元素定位，进行位置调整
fixed	固定定位相对于浏览器窗口进行位置调整
sticky	粘性定位是基于用户的滚动位置来定位

static 相当于元素没有加定位效果，如果元素加了定位，后面需要去掉，可以添加 position: static;

# 一、相对定位

TIP

盒子可以相对自己原来的位置进行位置调整，称之为 相对定位

给需要添加相对定位的元素，加上position: relative;
元素的位置通过（位置描述词）："left", "top", "right" ,"bottom"属性进行调整位置
属性值可以是正数，也可以是负数

定位的位置属性	描述
top	向下移动
bottom	向上移动
left	向右移动
right	向左移动
值可以为负数	即往规定方向相反移动

# 1、相对定位的特点

TIP

相对定位的元素，会在 "老家留坑" ，本质上仍然是在原来的位置，即：元素的初始位置占据的空间会被保留
只不过渲染在新的地方而已，渲染的图形可以比喻成影子，不会对页面其他元素产生任何影响

点击查看完整源代码

<!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>相对定位</title>

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

      div {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        margin: 100px auto;
      }

      p {
        width: 100px;
        height: 100px;
        background-color: tomato;
        /* 相对定位 */
        position: relative;
        top: 200px;
        left: 400px;
      }
    </style>
  </head>
  <body>
    <div>
      <p></p>
      <h3>我是标题</h3>
      <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
      </ul>
    </div>
  </body>
</html>

# 2、相对定位前后的对比

<style type="text/css">
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float: left;
  }
  .box2 {
    background-color: pink;
  }
  .box2 {
    /* 相对定位 */
    position: relative;
    /* 左偏移 20px */
    left: 20px;
    /* 上偏移20px */
    top: 20px;
  }
</style>
<body>
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
</body>

未设置相对定位前效果	设置相对定位后效果

值为负数

当把上面案例中的.box2 中的 left 和 top 值改为负数时，其效果如下

.box2 {
  /* 左偏移 -20px */
  left: 20px;
  /* 上偏移 -20px */
  top: 20px;
}

# 二、相对定位应用场景

TIP

用来微调元素自身的位置（案例 1，2、3）
可以当做绝对定位的参考盒子（绝对定位中会讲到）
用来提升自身的层级

# 1、鼠标滑动到元素，元素少量位置偏移动画

GIF 2022-07-20 18-31-15

点击查看完整源代码

<style>
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 480px;
    margin: 150px auto;
  }
  ul li {
    width: 100px;
    height: 120px;
    background-color: pink;
    margin: 0px 10px;
    float: left;
  }
  /* 
        鼠标滑动到li上，li设置为相对定位
        然后相对自身向上偏移10px
        向右偏移2px 
    */
  ul li:hover {
    position: relative;
    top: -10px;
    left: 2px;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</body>

# 2、网站导航

点击查看完整源代码

<style>
  body,
  ul,
  li {
    margin: 0;
    padding: 0;
  }
  a {
    text-decoration: none;
    color: #fff;
  }
  ul {
    height: 50px;
    margin-top: 50px;
    list-style: none;
    background-color: skyblue;
  }
  ul li {
    float: left;
    line-height: 50px;
  }
  ul li a {
    display: inline-block;
    padding: 0px 20px;
    height: 50px;
  }
  ul li a:hover {
    /* 相对定位，用来微调元素的位置 */
    position: relative;
    top: -5px;
    height: 60px;
    line-height: 60px;
    background-color: rgb(24, 181, 243);
  }
</style>
<body>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">免费直播课</a></li>
    <li><a href="#">web前端工程师</a></li>
    <li><a href="#">Java架构师</a></li>
    <li><a href="#">实战案例视频</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</body>

# 3、导航（鼠标划过带下划线）

点击查看完整源代码

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

  nav {
    width: 1200px;
    height: 40px;
    margin: 100px auto;
  }

  nav ul {
    list-style: none;
  }
  nav ul li {
    float: left;
    width: 120px;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }

  nav ul li a {
    font-size: 16px;
    text-decoration: none;
    background-color: #e8e7e3;
    display: block;
    color: #777;
  }

  nav ul li a:hover {
    border-bottom: 3px solid gold;
    background-color: #3f3f3f;
    color: #fff;
    /* 相对定位，用来微调元素的位置 */
    position: relative;
    bottom: 0px;
  }
</style>

<body>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">HTML标签</a></li>
      <li><a href="#">CSS样式</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">NodeJs</a></li>
      <li><a href="#">Vue</a></li>
      <li><a href="#">Koa</a></li>
      <li><a href="#">React</a></li>
      <li><a href="#">ElementUI</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </nav>
</body>

# 4、水平进度条

TIP

右浮动实现元素从右往左开始排列成一行，第一个排在最后面，最后一个排在最左边
通过相对定位微调线条位置，使其与圆形在垂直方向对齐
利用 ~ 后续兄弟选择器，来选择他后面的元素，修改样式

水平进度条

点击查看完整源代码

<style>
  .order-progress {
    text-align: center;
  }
  ul {
    /* border: 1px solid red; */
    font-size: 0;
    list-style: none;
    display: inline-block;
  }
  ul li {
    /* 右浮动实现元素从右往左开始排列 */
    float: right;
  }
  ul li:nth-child(even) {
    width: 150px;
    border-top: 2px dashed #ddd;
    /* 通过相对定位来微调线条位置，实现线条与圆垂直居中对齐 */
    position: relative;
    top: 24px;
  }
  ul li:nth-child(odd) {
    background-color: #ddd;
    width: 50px;
    height: 50px;
    font-size: 16px;
    margin: 0px 5px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
  }
  /* 当前进度 */
  ul li.current {
    background-color: skyblue;
    color: #fff;
  }
  /* 当前进度前面的元素偶数项样式 */
  ul li.current ~ li:nth-child(odd) {
    background-color: skyblue;
    color: #fff;
  }
  /* 当前进度前面的元素奇数项样式 */
  ul li.current ~ li:nth-child(even) {
    border-color: skyblue;
  }
</style>
<body>
  <div class="order-progress">
    <ul>
      <li>5</li>
      <li></li>
      <li>4</li>
      <li></li>
      <li class="current">3</li>
      <li></li>
      <li>2</li>
      <li></li>
      <li>1</li>
    </ul>
  </div>
</body>

# 三、绝对定位

盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

给需要添加绝对定位的元素，加上position: absolute;
元素的位置通过（位置描述词）："left", "top", "right" ,"bottom"属性进行调整位置
属性值可以是正数，也可以是负数

定位的位置属性	描述
top	到上边的距离
bottom	到下边的距离
left	到左边的距离
right	到右边的距离

/* 在不设置相对于谁定位时，默认相对浏览器的（0,0）坐标进行绝对定位 */
position: absolute;
top: 100px;
left: 100px;

绝对定位元素 8 大特性

绝对定位的元素，相对离自己最近的定位父元素进行位置调整
如果没有定位的父元素，则相对 body 进行位置调整
元素完全脱离文档流，释放其原本所占据的空间
元素的层级提升，会覆盖在其它元素上。
行内元素加上定位后，其具有行内块元素特性，支持宽高设置
margin: auto; 水平居中失效
定位元素未设置宽高情况下，同时设置 top 和 bottom 会改变元素高，同时设置 left 和 right 会改变元素宽
在元素调置宽高情况下，同时设置 top 与 bottom ,会以 top 值为主 bottom 不生效，同时设置 left 与 right，则以 left 为主，right 不生效。

# 1、绝对定位脱离标准的文档流

TIP

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖
脱离标准文档流的方法：浮动、绝对定位、固定定位
使用绝对定位的元素将会是一种漂浮状态

点击查看完整源代码

<style>
  .box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
  }

  .box2 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    /* 绝对定位 */
    position: absolute;
    top: 200px;
    left: 300px;
  }

  .box3 {
    width: 200px;
    height: 200px;
    background-color: tomato;
  }
</style>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

# 2、脱离文档流，层级提升

TIP

绝对定位元素完全脱离文档流,释放其原本所占据的空间，同时层级提升，会覆盖在其它元素上面

点击查看完整源代码

<style>
  .container {
    width: 300px;
    height: 100px;
    border: 2px solid red;
    margin: 100px auto;
    /* 相对定位，是.box2绝对定位的参考对象 */
    position: relative;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float: left;
  }
  .box3 {
    background-color: khaki;
  }
  .box2 {
    background-color: pink;
    /* 绝对定位 */
    position: absolute;
    /* 与.container元素左边距离为 10px */
    left: 10px;
    /* 与.container元素上边距离50px */
    top: 50px;
  }
</style>
<body>
  <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>

.box2 未绝对定位前效果	.box2 绝对定位后效果

# 3、相对于其最近的定位的父元素定位

TIP

父元素未定位，祖先元素定位，绝对定位相对于定位的祖先元素定位

点击查看完整源代码

<style>
  .container {
    width: 200px;
    height: 200px;
    border: 2px solid red;
    margin: 100px auto;
    /* 相对定位，是.box2绝对定位的参考对象 */
    position: relative;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-top: 100px;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: pink;
    /* 绝对定位 */
    position: absolute;
    /* 与.container元素左边距离为 10px */
    left: 10px;
    /* 与.container元素上边距离50px */
    top: 10px;
  }
</style>
<body>
  <div class="container">
    <div class="box">
      <div class="item"></div>
    </div>
  </div>
</body>

.item 未使用绝对定位前效果	.item 使用绝对定位后效果

# 4、父元素及祖先元素都未定位，则相对于 body 定位

点击查看完整源代码

<style>
  .container {
    width: 200px;
    height: 200px;
    border: 2px solid red;
    margin: 100px auto;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-top: 100px;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: pink;
    /* 绝对定位 其父元素和祖先元素都未设置定位，则其相对body定位 */
    position: absolute;
    /* 与body左边距离为 10px */
    left: 10px;
    /* 与body上边距离10px */
    top: 10px;
  }
</style>
<body>
  <div class="container">
    <div class="box">
      <div class="item"></div>
    </div>
  </div>
</body>

.item 未使用定位前效果	.item 设置绝对定位后效果

# 5、行内元素绝对定位后，具有行内块元素特性

点击查看完整源代码

<style>
  span {
    /* 行内元素加上绝对定位后，支持宽高设置 */
    width: 200px;
    height: 100px;
    background-color: red;
    /* 绝对定位 */
    position: absolute;
    /* 上偏移50px */
    top: 50px;
    /* 左偏移 */
    left: 50px;
  }
</style>
<body>
  <span></span>
</body>

# 6、margin:0 auto 水平居中失效

TIP

绝对定位的元素，使用 margin:auto 水平居中无效

点击查看完整源代码

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: khaki;
    /* 元素绝对定位 */
    position: absolute;
    /* 元素绝对定位后，margin:0 auto;水平居中失效 */
    margin: 0 auto;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

# 7、top 与 bottom 及 left 与 right 同时设置，调节宽高

TIP

定位元素在未设置宽高时，同时设置 top 和 bottom 会改变元素高，同时设置 left 和 right 会改变元素宽

点击查看完整源代码

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    /* 相对定位 */
    position: relative;
  }
  .item {
    background-color: khaki;
    /* 元素绝对定位 */
    position: absolute;
    /* 
            通过以下值，元素会被自动拉宽和拉高，
            与相对定位元素上下 左右 10px间距 
        */
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

# 8、top 与 bottom 及 left 与 right 的优先级

TIP

在元素设置宽高情况下，同时设置 top 与 bottom，会以 top 值为主 bottom 不生效，同时设置 left 与 right，则以 left 为主，right 不生效。

点击查看完整源代码

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    /* 相对定位 */
    position: relative;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: khaki;
    /* 元素绝对定位 */
    position: absolute;
    /* 
        通过以下值，元素会被自动拉宽和拉高，
        与相对定位元素上下 左右 10px间距 
        */
    top: 50px;
    bottom: 10px;
    left: 50px;
    right: 50px;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

# 9、绝对定位的盒子垂直、水平居中

TIP

绝对定位的盒子垂直居中是一个非常实用的技术
实现原理如下

/* 垂直居中 */
position: absolute;
top: 50%;
margin-top: -自己高度一半;

/* 水平居中 */
position: absolute;
left: 50%;
margin-left: -自己宽度一半;

点击查看完整源代码

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

  div {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 50px auto;
    /* 相对定位 */
    position: relative;
  }

  p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    /* 绝对定位 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 垂直居中：margin-top: -自己高度的一半; */
    margin-top: -50px;
    /* 水平居中 margin-left: -自己宽度的一半; */
    margin-left: -50px;
  }
</style>

<body>
  <div>
    <p></p>
  </div>
</body>

# 四、绝对定位应用场景

TIP

绝对定位用来制作压盖、遮罩效果
绝对定位用来结合 CSS 精灵使用
绝对定位可以结合 JS 实现动画
绝对定位应用非常多，灵活性也很高，靠经验累积

# 1、绝对定位用来结合 CSS 精灵，垂直居中对齐使用

点击查看完整源代码

<!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>轮播图布局</title>

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

      .swiper {
        width: 1000px;
        height: 360px;
        margin: 100px auto;
        position: relative;
      }

      .swiper .btn {
        width: 30px;
        height: 50px;
        display: block;
        line-height: 50px;
        text-align: center;
        text-decoration: none;
        font-size: 26px;
        color: rgb(172, 169, 169);
        /* 垂直居中 */
        position: absolute;
        top: 50%;
        margin-top: -25px;
        border-radius: 3px;
      }

      .swiper .btn:hover {
        background-color: #737373;
        color: #fff;
      }

      .swiper .leftbtn {
        left: 10px;
      }

      .swiper .rightbtn {
        right: 10px;
      }

      .swiper ol {
        list-style: none;
        font-size: 0;
        text-align: center;
        /* 水平居中 */
        width: 100%;
        position: absolute;
        bottom: 10px;
      }

      .swiper ol li {
        width: 12px;
        height: 12px;
        background-color: rgb(214, 212, 212);
        border-radius: 50%;
        display: inline-block;
        margin: 0 5px;
        cursor: pointer;
      }

      .swiper ol li.selected {
        background-color: gold;
      }
    </style>
  </head>
  <body>
    <div class="swiper">
      <img src="images/banner1.webp" width="1000" height="360" alt="" />
      <a href="javascript:;" class="btn leftbtn">&lt;</a>
      <a href="javascript:;" class="btn rightbtn">&gt;</a>
      <ol>
        <li></li>
        <li class="selected"></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </body>
</html>

# 2、绝对定位实现黑色半透明遮罩层

GIF 2022-07-20 21-38-16

点击查看完整源代码

<style>
  .box {
    width: 300px;
    height: 300px;
    position: relative;
  }
  .box::before {
    display: none;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .box .icon-play {
    display: block;
    width: 80px;
    height: 80px;
    background: url(./images/play.png) no-repeat center;
    background-size: cover;
    position: absolute;
    left: 110px;
    top: 110px;
    display: none;
  }
  .box:hover::before {
    display: block;
  }
  .box:hover span {
    display: block;
  }
</style>
<body>
  <div class="box">
    <img src="./images/tx.png" alt="" />
    <span class="icon-play"></span>
  </div>
</body>

# 3、绝对定位实现带三角形的会话框

GIF 2022-07-20 22-04-26

点击查看完整源代码

<style>
  .head {
    width: 124px;
    margin: 150px auto;
    position: relative;
  }

  /* 头像样式 */
  .head img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid skyblue;
  }
  .head-txt {
    width: 200px;
    height: 140px;
    background-color: rgb(213, 241, 252);
    /* 
            绝对定位
            left的距离=头像宽+左右border+三角形的宽
            top=(自身高-相对定位元素高）/2
         */
    position: absolute;
    left: 124px;
    top: -20px;
    border-radius: 20px;
    line-height: 100px;
    text-align: center;
    /* 最开始会话框隐藏 */
    display: none;
  }
  .head-txt::after {
    display: block;
    content: "";
    width: 0;
    border: 20px solid transparent;
    border-right-color: rgb(213, 241, 252);
    /* 
            三角形相对的是.head-txt这个盒子定位
            top值 = （.head-txt高140-三角形高40）/ 2
            left值 = 三角形宽的2倍，因为左边还有一个透明的三角形 
        */
    position: absolute;
    top: 50px;
    left: -40px;
  }
  .head:hover .head-txt {
    display: block;
  }
</style>
<body>
  <div class="head">
    <img src="images/tx.png" alt="" />
    <div class="head-txt">大家好，我是小美</div>
  </div>
</body>

# 五、固定定位

固定定位简介

给需要添加固定定位的元素，加上 position: fixed;
元素的位置通过（位置描述词）："left", "top", "right" ,"bottom"属性进行调整位置。属性值可以是正数，也可以是负数

语法：

position: fixed;
top: 100px;
left: 100px;

注：

固定定位只能以页面为参考点，么有绝对定位的参考点，只能以浏览为参考点
固定定位脱离标准文档流
除其位置是相对于浏览器窗口而言外，其它与绝对定位的特性一致

<style>
  body {
    height: 2000px;
  }
  .item {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 固定定位 */
    position: fixed;
    /* 与浏览器顶部100px */
    top: 100px;
    /* 与浏览器右边10px */
    right: 10px;
  }
</style>
<body>
  <div class="item"></div>
</body>

# 六、固定定位应用场景

TIP

不管浏览器的滚动条如何滚动，元素始终相对浏览器窗口的位置不变。

比如：返回顶部、楼梯式导航、右侧悬浮菜单，顶部与底部通栏广告等

# 1、固定定位实现返回顶部

点击查看完整源代码

<style>
  body {
    /* 为演示有滚动条的效果，给body设置高度 */
    height: 2000px;
  }
  .top {
    display: block;
    width: 60px;
    height: 50px;
    background-color: rgb(151, 148, 148);
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    /* 固定定位 */
    position: fixed;
    bottom: 100px;
    right: 20px;
  }
  .top:hover {
    background-color: gold;
  }
</style>
<body>
  <a href="#" class="top"> 返回顶部 </a>
</body>

# 2、常见的登录弹窗效果

点击查看完整源代码

<style>
  body {
    height: 2000px;
  }
  input {
    margin: 0;
    border: 0;
  }
  /* 黑色半透明遮罩层 */
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .login {
    width: 300px;
    padding: 40px;
    background-color: #fff;
    /* 固定定位 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .login input {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    margin: 10px 0;
    border: 1px solid #666;
    padding-top: 9px;
  }
  .login input::placeholder {
    font-size: 18px;
  }
  .login input.button {
    padding-top: 0;
    border: none;
    background-color: tomato;
    color: #fff;
    font-size: 24px;
  }
  /* 关闭按扭 */
  .login::after {
    display: block;
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    right: 2px;
    top: 2px;
    background: #ddd url(./images/close.png) no-repeat center;
    cursor: pointer;
  }
</style>
<body>
  <a href="javascript:;">登录</a>
  <a href="javascript:;">注册</a>

  <div class="mask"></div>
  <div class="login">
    <div class="user-name">
      <input type="text" placeholder="用户名" />
    </div>
    <div class="user-pwd">
      <input type="text" placeholder="密码" />
    </div>
    <div class="login-button">
      <input type="submit" value="登录" class="button" />
    </div>
  </div>
</body>

# 3、左右固定，中间自适应布局

GIF 2022-07-20 23-05-13

点击查看完整源代码

<style>
  body {
    margin: 0;
  }
  .left {
    width: 200px;
    /* 固定定位 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: skyblue;
  }
  .right {
    width: 150px;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: khaki;
  }
  .main {
    margin: 0 160px 0px 210px;
    background-color: tomato;
    min-height: 700px;
  }
</style>
<body>
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</body>

# 七、粘性定位

粘性定位解读

给需要添加粘性定位的元素，加上position:sticky;
粘性定位可以看做是相对定位 与 "固定定位" 的混合产物 （这里的固定定位，并不是我们上面说的position:fixed;只是具有相似点）
当滚动高度小于元素所在位置时，元素以相对定位呈现
当滚动高度大于元素所在位置时，元素以固定定位呈现
当滚动高度大于（元素的父元素底部与浏览器高）时，元素相对于父元素定位，一起移走
粘性定位相对离他最近的一个拥有“滚动机制”的祖先元素（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时)定位或直接块级父元素定位

固定在离自己最近的拥有“滚动机制”的祖先上

body 为最近“滚动机制”的祖先，此时要看到元素相对浏览器固定效果，元素的直接父元素高度一定要大于元素本身。

点击查看完整源代码

<style>
  body {
    margin: 0;
    height: 2000px;
  }
  .top {
    height: 100px;
    background-color: pink;
  }
  .main {
    width: 1000px;
    margin: 20px auto;
    /* 这里的高度一定要大于.head元素的高度，否则看不到粘性定位效果 */
    height: 700px;
    background-color: salmon;
  }
  .head {
    height: 200px;
    background-color: rgb(240, 230, 140, 0.5);
    /* 粘性定位 */
    position: sticky;
    top: 0px;
  }
</style>
<body>
  <div class="top"></div>
  <div class="main">
    <!-- 粘性定位的元素 -->
    <div class="head"></div>
  </div>
</body>

元素的父级拥有“滚动机制”

当滚动父级元素的滚动条时，元素固定在父级元素的最顶部。

点击查看完整源代码

<style>
  body {
    margin: 0;
    height: 2000px;
  }
  .top {
    height: 100px;
    background-color: pink;
  }
  .main {
    width: 500px;
    margin: 20px auto;
    height: 300px;
    overflow: auto;
  }
  .head {
    height: 200px;
    background-color: rgb(240, 230, 140, 0.5);
    /* 粘性定位 */
    position: sticky;
    top: 0px;
  }
  .con {
    height: 700px;
    background-color: skyblue;
  }
</style>
<body>
  <div class="top"></div>
  <div class="main">
    <div class="head">111</div>
    <div class="con">222</div>
  </div>
</body>

# 八、粘性定位应用场景

TIP

类似吸顶盒效果、需要元素吸附指定位置的需求，一般会用到

# 1、头部和左侧吸顶盒效果

GIF 2022-07-21 15-29-56

点击查看完整源代码

<style>
  body {
    margin: 0;
  }
  /* 清除浮动 */
  .clearfix::after {
    display: block;
    content: "";
    clear: both;
  }
  .top {
    height: 200px;
    background-color: skyblue;
  }
  .head {
    height: 100px;
    background-color: palevioletred;
    /* 粘性定位 */
    position: sticky;
    top: 0;
  }
  .main {
    width: 600px;
    margin: 20px auto;
  }
  .left {
    width: 200px;
    height: 500px;
    background-color: khaki;
    float: left;
    /* 粘性定位 */
    position: sticky;
    top: 120px;
  }
  .right {
    height: 2000px;
    width: 350px;
    float: right;
  }
  .right .item {
    height: 200px;
    margin: 20px 0px;
  }
  /* 偶数项背景色 */
  .right .item:nth-child(even) {
    background-color: pink;
  }
  /* 奇数项背景色 */
  .right .item:nth-child(odd) {
    background-color: skyblue;
  }
</style>
<body>
  <div class="top"></div>
  <div class="head"></div>
  <div class="main clearfix">
    <!-- 粘性定位盒子 -->
    <div class="left"></div>
    <!-- 右侧内容区 -->
    <div class="right">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</body>

# 2、字母排序显示效果

GIF 2022-07-21 15-39-21

点击查看完整源代码

<style>
  .box {
    width: 500px;
    height: 300px;
    /* y轴方向溢出指定高度出现滚动条 */
    overflow-y: scroll;
  }
  dl dt {
    font-size: 20px;
    height: 30px;
    background-color: rgb(255, 192, 203);
    /* 粘性定位 */
    position: sticky;
    top: 0;
  }
  dl dd {
    line-height: 30px;
    font-size: 20px;
  }
</style>
<body>
  <div class="box">
    <dl>
      <dt>A</dt>
      <dd>Andrew W.K.</dd>
      <dd>Apparat</dd>
      <dd>Arcade Fire</dd>
      <dd>At The Drive-In</dd>
      <dd>Aziz Ansari</dd>
    </dl>
    <dl>
      <dt>C</dt>
      <dd>Chromeo</dd>
      <dd>Common</dd>
      <dd>Converge</dd>
      <dd>Crystal Castles</dd>
      <dd>Cursive</dd>
    </dl>
    <dl>
      <dt>E</dt>
      <dd>Explosions In The Sky</dd>
    </dl>
    <dl>
      <dt>T</dt>
      <dd>Ted Leo & The Pharmacists</dd>
      <dd>T-Pain</dd>
      <dd>Thrice</dd>
      <dd>TV On The Radio</dd>
      <dd>Two Gallants</dd>
    </dl>
  </div>
</body>

# 3、表格首行冻结

GIF 2022-07-21 15-51-17

点击查看完整源代码

<style>
  .box {
    width: 500px;
    height: 200px;
    /* y轴方向溢出，显示滚动条 */
    overflow-y: scroll;
  }
  table {
    width: 100%;
    /* 合并单元格边框线 */
    border-collapse: collapse;
  }
  table tr td,
  table tr th {
    border: 1px solid #ddd;
  }
  table tr th {
    background-color: skyblue;
    height: 50px;
    /* 表格首行冻结 */
    position: sticky;
    top: 0;
  }
  table tr td {
    font-size: 16px;
    text-align: center;
    height: 40px;
  }
</style>
<body>
  <div class="box">
    <table>
      <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>成绩</th>
        <th>排名</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>0001</td>
        <td>90</td>
        <td>1</td>
      </tr>
      <tr>
        <td>张四</td>
        <td>0002</td>
        <td>80</td>
        <td>2</td>
      </tr>
      <tr>
        <td>张五</td>
        <td>0003</td>
        <td>77</td>
        <td>3</td>
      </tr>
      <tr>
        <td>张六</td>
        <td>0004</td>
        <td>70</td>
        <td>4</td>
      </tr>

      <tr>
        <td>张七</td>
        <td>0005</td>
        <td>67</td>
        <td>5</td>
      </tr>
      <tr>
        <td>张八</td>
        <td>0006</td>
        <td>65</td>
        <td>6</td>
      </tr>
    </table>
  </div>
</body>

思考题：首列冻结的效果如何实现

# 九、定位的总结

定位类型	描述	应用场景
相对定位 relative	相对自身原来的位置定位，占着原来的位置	微调元素的位置，但还占据原来空间只想提元升素的层级，但还是占原来的空间
绝对定位 absolute	相对离自己最近的定位的父元素定位，原来的位置被释放，相当于悬浮在页面中，会覆盖在其它元素的上面显示	一个元素想覆盖在另一个元素上面配合 JS 来实现动画效果
固定定位 fixed	相对浏览器窗口进行定位	你想让一个元素相对浏览器的位置一直不动
粘性定位 sticky	相对离自己最近的拥有滚动机制的父元素定位，或（直接父元素定位）	吸附效，冻结效果

# 十、z-index 设置定位元素层叠顺序

TIP

定位的元素脱离了正常文档流，他相当于漂浮在文档上面。那如果有很多个元素都用了定位，那如何确定这些元素的层叠顺序里。z-index就是用来指定 定位元素 的堆叠顺序。

同一层叠上下文中 z-index值的特性

z-index 的默认值是 0
z-index 值可以是正，也可以是负
z-index 值相同的元素，写在后面的会覆盖前面的
z-index 值越大，元素越在上面显示
z-index 只针对定位元素有效，对其它元素效

关于什么是层叠上下文，你暂时不需要了解，接下来后面就会讲到。在这里你只要简单的理解 z-index 可以用来控制定位元素的堆叠顺序。

# 1、z-index 值相同时，写在后面的覆盖在前面的上面

以下案例中的

.item1与.item2都未设置 z-index 值时，默认都为 0，写在后面的会覆盖在前面的上面
所以.item2 会显示在.item1 的上面。

点击查看完整源代码

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    position: relative;
  }
  .item {
    width: 100px;
    height: 100px;
    position: absolute;
  }
  /* 
    .item1与.item2都是相对于.box绝对定位
    .item1与.item2在都未高设置z-index时，默认值都0，
    写在后面会覆盖在前面的上面 
  */
  .item1 {
    background-color: khaki;
    left: 40px;
    top: 40px;
  }
  .item2 {
    background-color: rgb(255, 192, 203, 0.8);
    top: 0;
    left: 0;
  }
</style>
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
  </div>
</body>

# 2、z-index 的值越大，越在最上面显示

下面案例中

.item1的 z-index 为 3，.item2的 z-index 为 1，z-index 值越大，越在最上面显示
所以.item1显示在.item2的上面。

点击查看完整源代码

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    position: relative;
  }
  .item {
    width: 100px;
    height: 100px;
    position: absolute;
  }
  /* 
          .item1与.item2都是相对于.box绝对定位
          .item1的z-index为3
          .item2的z-index为1
          3>1，所以.item1会显示在item2的上面
      */
  .item1 {
    background-color: khaki;
    left: 40px;
    top: 40px;
    z-index: 3;
  }
  .item2 {
    background-color: rgb(255, 192, 203, 0.8);
    top: 0;
    left: 0;
    z-index: 1;
  }
</style>
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
  </div>
</body>

# 3、z-index 值为负数

TIP

z-index 值为负数，会显示在当前层叠上下文中所有元素的最下面，因此这种方式也可以用来隐藏一个元素

点击查看完整源代码

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: rgba(10, 233, 181, 0.5);
  }
  .box1 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    /* 相对定位 */
    position: relative;
    margin-left: 50px;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 绝对定位 */
    position: absolute;
    z-index: -1;
    top: -50px;
    left: -30px;
  }
</style>
<body>
  <!-- 正常的块级元素 -->
  <div class="box"></div>
  <!-- 相对定位元素 -->
  <div class="box1">
    <!-- 绝对定位元素 -->
    <div class="item"></div>
  </div>
</body>

# 十一、CSS 中的层叠上下文

TIP

深入浅出 CSS 中的层叠上下文

# 1、什么是“层叠上下文”

TIP

层叠上下文(stacking context)，是 HTML 中一个三维的概念。

在 css2.1 规范中有明确强调，每个 css 盒模型都是处在一个三维空间里面，他们分别处在平面的 X 轴 ，Y 轴 以及表示层叠的 Z 轴 。
如下图所示的三个盒子，他们分别在处在 X 轴 和 Y 轴 ，同时在 Z 轴 上发生层叠。

xyz-stacking-context

但

并不是所有的盒子都会在Z 轴发生层叠.我们都知道，默认情况下，HTML 元素在页面是沿 X 轴 和 Y 轴 平铺。
如下图所示：元素默认从上往下，从左往右依次排列。所以我们察觉不到它们在 Z 轴 上的层叠关系。

TIP

而一旦元素发生堆叠，我们就分感受到一个元素覆盖了另一个元素，这时我们就能感受到Z 轴的存在。但是实事上，不管元素发不发生重叠，Z 轴都存在。

理解了上面内容之后，那我们回过头来理解下，到底什么是层叠上下文？
你可以把层叠上下文理解为 HTML 元素的一个属性，一但 HTML 元素拥有了这个属性，我们可以理解为这个 HTML 元素在Z 轴上就“高人一等”，也就是在 Z 轴上会显示在更上一层,。

怎么个具象化法理解？

你可以把「层叠上下文」理解为当官：网页中有很多很多的元素，我们可以看成是真实世界的芸芸众生。真实世界里，我们大多数人是普通老百姓们，还有一部分人是做官的官员。OK，这里的“官员”就可以理解为网页中的层叠上下文元素。

换句话说，页面中的元素有了层叠上下文，就好比我们普通老百姓当了官，一旦当了官，相比普通老百姓而言，离皇帝更近了。
同理，当元素有了层叠上下文，就相当于他比网页中其它元素的级别更高了，在 Z 轴上的位置就就高了，离我们用户（屏幕）更近了，显示在更上一层。

# 2、层叠上下文的创建

TIP

层叠上下文也基本上是有一些特定的 CSS 属性创建的。

主要由以下 3 点

html 根元素：页面根元素天生具有层叠上下文，称之为“根层叠上下文”。
z-index 值为数值的定位元素的传统层叠上下文(z-index:auto 不会创建层叠上下文）。
其他 CSS3 属性。

# ① 根层叠上下文

TIP

指的是页面根元素，也就是滚动条的默认的始作俑者<html>元素。

这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因。
我们写在 body 中的 HTML 标签，默认的就是处在 HTMl 这个根层叠上下文中，在这个层叠上下文中各元素在Z 轴上有着自己的排列顺序，具体如何排列，后面层叠顺序会讲到。

# ② 定位元素的传统层叠上下文

TIP

对于包含有position:relative/position:absolute的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。

position值为 fixed（固定定位）或 sticky（粘滞定位）的元素
当我们给元素添加定位和 z-index 时，元素就会显示在其它元素的上面，本质就是因为他拥有了自己的层叠上下文，在 Z 轴上要比其它未拥有层叠上下文的元素更高一等。

# ③ CSS3 与新时代的层叠上下文

TIP

CSS3 的出现除了带来了新属性，同时还对过去的很多规则发出了挑战。

例如，CSS3 transform[对 overflow 隐藏对 position: fixed; 定位的影响等
而这里，层叠上下文这一块的影响要更加广泛与显著

如下：

z-index值不为auto的flex项（父元素display:flex|inline-flex）
元素的opacity值不是1
元素的transform值不是none
元素mix-blend-mode值不是normal
元素的filter值不是none
元素的isolation值是isolate
will-change指定的属性值为上面任意一个
元素的-webkit-overflow-scrolling设为touch

# 3、什么是层叠顺序

我们都知道

除了定位的元素会覆盖在其它元素的上面之外，还有很多情况下元素会发生重叠，那发生重叠时元素是以什么样的顺序来重叠的呢？这就是我们接下来要讲的元素的层叠顺序。

“层叠顺序”英文称作”stacking order”，表示元素发生层叠时候有着特定的垂直显示顺序。
我们页面中的元素有：块级元素，行内元素，行内块元素，浮动元素，定位元素，还有后面学到的一些 CSS3 属性，当元素添加相关属性后，元素的层级也会发生改变。

以下图只列出了目前学到的相关元素，在同一层叠上下文中的层叠顺序。

同一层叠上下文，元素的层叠顺序，参考上图，由上到下分别

背景和边框：建立当前层叠上下文元素的背景和边框。
负的 z-index：当前层叠上下文中，z-index 属性值为负的元素。
块级盒：文档流内非行内级非定位后代元素。
浮动盒：非定位浮动元素。
行内盒：文档流内行内级非定位后代元素。
z-index:0;层叠级数为 0 的定位元素。
正z-index：z-index属性值为正的定位元素。

# 案例 1：当元素都处在 html 层叠上下文中时

点击查看完整源代码

 <style>
      body {
        margin: 0;
      }
      .container {
        width: 400px;
        height: 600px;
        background-color: #ddd;
        margin: 50px;
      }
      .box {
        width: 300px;
        height: 100px;
      }
      .box1 {
        background-color: orchid;
        position: absolute;
        z-index: -1;
        top: 20px;
        left: 20px;
      }
      .box2 {
        background-color: aquamarine;
        margin-left: 20px;
      }
      .box3 {
        background-color: pink;
        float: left;
        margin-top: -50px;
        margin-left: 20px;
      }
      .box4 {
        background-color: khaki;
        display: inline-block;
        margin-left: 50px;
        margin-top: -50px;
      }
      .box5 {
        background-color: orange;
        position: absolute;
        left: 110px;
        top: 220px;
        z-index: 0;
      }
      .box6 {
        background-color: rgb(225, 55, 197);
        position: absolute;
        left: 90px;
        top: 300px;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 定位 z-index:-1 -->
      <div class="box box1">定位 z-index:-1</div>
      <!-- 块级元素 -->
      <div class="box box2">block块元素</div>
      <!-- 浮动元素 -->
      <div class="box box3">float浮动元素</div>
      <!-- 行内块级元素 -->
      <div class="box box4">行内块级元素</div>
      <!-- 定位元素 z-index:0 -->
      <div class="box box5">定位元素 z-index:0</div>
      <!-- 定位元素 z-index:1 -->
      <div class="box box6">定位元素 z-index:1</div>
    </div>
  </body>

重点提示：

如果元素的等级一样，则写在后面的会覆盖在前面的上面。
如块级和块级，浮动和浮动，行内块与行内块，定位与定位元素，发生重叠时，默认的写在后面的会在最上面显示

# 案例 2：当元素处在定位元素的层叠上下文中

TIP

当相对定位元素处在 html 层叠上下文中，设置 z-index:-1 时，元素会在所有元素的下面显示。
当相对定位元素处在定位元素的层叠上下文中，设置 z-index-1;时，元素会在当前层叠上下文元素中所有元素的最下面。

点击查看完整源代码

<style>
  .box,
  .item {
    width: 100px;
    height: 100px;
  }
  /*box为创建层叠上下文元素*/
  .box {
    background-color: skyblue;
    border: 10px solid khaki;
    position: relative;
    z-index: 0; /*创建层叠上下文-关键代码*/
    /* z-index: auto; */
  }
  .item {
    background-color: pink;
    position: relative;
    top: 50px;
    left: 50px;
    /*元素的层级*/
    z-index: -1;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

.box 添加 z-index:0;	.box 未添加 z-index 属性

# 案例 3：不同层叠上下文中的子元素层叠顺序

TIP

如下图的 B 和 C 都创建了自己的层叠上下文，那 B 中的子元素和 C 中的子元素的层叠顺序是怎么样的？

leve-xyz

点击查看完整源代码

<style>
  .container {
    width: 400px;
    height: 500px;
    background-color: rgb(221, 219, 219, 0.7);
  }
  .box {
    width: 200px;
    height: 200px;
    position: relative;
    z-index: 0;
    /* 如果z-index为-1,他处在html层叠上下文中，其会显示在当前上下文的块级元素的下面显示 */
    z-index: -1;
  }
  .box1 {
    background-color: pink;
    /* 
            当z-index值为2时,box1在.box2上面
            其box1的子元素永远在box2上面 
        */
    /* z-index: 2; */
  }
  .box2 {
    background-color: skyblue;
    top: -50px;
    left: 20px;
  }
  .item {
    width: 100px;
    height: 100px;
    position: absolute;
  }
  .item1 {
    background-color: orange;
    top: 100px;
    left: 50px;
    z-index: 22;
  }
  .item2 {
    background-color: chartreuse;
    top: -20px;
    left: 20px;
    z-index: 2;
  }
</style>
<body>
  <div class="container">
    <div class="box box1">
      <div class="item item1"></div>
    </div>
    <div class="box box2">
      <div class="item item2"></div>
    </div>
  </div>
</body>

.box 加 z-index:0;创建自己的层叠上下文，效果如下

.box 未添加 z-index 属性，未创建自己的层叠上下文，效果如下：

如果.box 的 z-index 的值为-1，则.box 中的所有内容都会在灰色块下面显示

# 4、何确定两个元素的的层叠顺序

TIP

在比较两个元素的层叠顺序时，会先比较他们所在的层叠上下文的层叠顺序
如果他们所在的是同一层叠上下文，则按同一层叠上下文中的元素排列顺序来计算。
如果不在同一层叠上下文中，则他们所在层叠上下文的顺序决定了他们的顺序。
- 即 A 层叠上下文要高于 B 叠上下文，则 A 中的所有子孙元素都会高于 B 中的所有子孙元素，z-index 再大也没有，因为 z-index 只能控制同一层叠上下文中的元素堆叠关系。

形象比喻：

A 的官位比 B 的高，则 A 家里的下人都要比 B 家的下人高一等。下人的等级本质是由他们所在的官家的等级决定的。

# 十二、综合实践

弹性滑动导航

相对定位与绝对定位结合，同时需要配合 z-index 来调节元素上下级关系

GIF-2022-07-20-19-52-53

点击查看完整源代码

<style>
  /* 清除默认样式 */
  body,
  ul,
  li {
    margin: 0;
    padding: 0;
  }
  ul.menu {
    width: 800px;
    height: 50px;
    line-height: 50px;
    margin: 100px auto;
    background-color: rgb(251, 190, 180);
    list-style: none;
    /*相对定位，作为li的参考物*/
    position: relative;
  }
  ul.menu li {
    float: left;
    /* 给li加相对定位，主要是为了提升li的层级 */
    position: relative;
    /* 这里的z-index值要大于li:last-child的z-index值，否则文字会被滑块盖掉 */
    z-index: 2;
  }
  ul.menu li a {
    display: block;
    padding: 0px 20px;
    color: #000;
    text-decoration: none;
  }
  ul.menu li:first-child a {
    color: #fff;
  }
  ul.menu li:last-child {
    width: 72px;
    height: 60px;
    background-color: tomato;
    /*这个li用来做底部红色滑块，需要相对ul进行绝对定位*/
    position: absolute;
    left: 0px;
    top: -5px;
    /* 过渡动画 */
    transition: all 1s;
    /*这里的z-index值一定要小与其它li的z-index的值，否则滑块就会覆盖文字*/
    z-index: 1;
  }
  ul.menu li:hover a {
    color: #fff;
  }
  /* 这里的功能需要用js来实现，以下只是用css3简单演示实现原理 */
  ul.menu li:hover ~ .move {
    width: 110px;
    left: 348px;
  }
</style>
<body>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">免费直播课</a></li>
    <li><a href="#">web前端工程师</a></li>
    <li><a href="#">Java架构师</a></li>
    <li><a href="#">实战案例视频</a></li>
    <li><a href="#">关于我们</a></li>
    <!--这个li是用来做橘红色的小滑块-->
    <li class="move"></li>
  </ul>
</body>

提示

要实现以上完整的动画导航效果，需要用 JS 来实现，JS 部分代码此处省略。
以上代码只是用简单的 css3 动实现这个原理，并不完整。主要是让大家理解相对定位的应用场景。

# 十三、CSS 定位专项案例训练（作业）

根据课程进度完成以下针对性案例开发，开发过程要求：

利用 PS（Photoshop）与 PxCook 结合，在 PS 中的找到 PxCook-切图面板，选中想要切图的图层或者 图层组 ，然后点击切图面板上的 标记为切图 按钮 -> 再导出到 PxCook
在 PxCook 中下载对应的切图素材即可获取当前案例中的开发素材
开发过程中所需的尺寸在 PxCook 中量取

以上开发开发流程是用于个人训练从切图、量取尺寸，到具体的开发过程，包括平时自学中如果没有 PSD 源文件时，PxCook 是最佳的个人开发工具。因此现在阶段推荐使用这种方式来练习

在实际企业网页开发中（更多是团队协作开发，流程如下）

设计师设计好 UI 设计稿后 -> 会在 PS 中标记切图 -> 导出至蓝湖（国内企业用的多）中
前端开发人员下载网页开发所需的素材 -> 在蓝湖中量取尺寸 -> 即可开发静态页面

我们把 CSS/CSS3 基础知识全部学习完之后，会有 3 大项目开发（PC 端，响应式，移动端）会按照企业真实团队协作的方式，用 3 个项目来完整的实践。

PSD 的源文件设计稿（联系助理老师获取即可）

具体操作步骤讲解，在钉钉群直播回放视频（第十二课：CSS 盒子模型）中可查阅

切记

学习阶段一定要按照以上的流程学习，提前熟悉工具和整个开发步骤，企业真实项目开发就是这样的流程

# 1、酷狗音乐精选歌单效果

酷狗音乐精选歌单效果

点击查看完整版视频讲解

# 2、小米商城右侧悬浮菜单

小米商城右侧悬浮菜单

点击查看完整版视频讲解

# 3、带左右按扭的自动轮播图效果布局

带左右按扭的自动轮播图效果布局

点击查看完整版视频讲解

# 4、CSS 实现二级导航下拉菜单

CSS实现二级导航下拉菜单

点击查看完整版视频讲解

# 5、CSS 时间轴效果布局

CSS时间轴效果布局

点击查看完整版视频讲解

← 浮动、BFC 规范、清除浮动的最佳实践 margin 负值的最佳实践 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料