非零基础自学前端最后一遍一 HTML+CSS 15 CSS元素定位

r囧r小猫 2024-03-22 17:13 49阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  15 CSS元素定位
         *   *  15.1 布局-元素定位-标准流的理解
             *   *  15.1.1 标准流（Normal Flow）
                 *  15.1.2 margin-padding位置调整
             *  15.2 布局-元素定位-position属性介绍
             *   *  15.2.1 认识元素的定位
                 *  15.2.2 认识position属性
                 *  15.2.3 静态定位 - static
             *  15.3 布局-元素定位-相对定位的使用
             *   *  15.3.1 相对定位 - relative
                 *  15.3.2 相对定位练习
             *  15.4 布局-元素定位-梦幻西游案例
             *   *  15.4.1 相对定位练习
             *  15.5 布局-元素定位-固定定位的使用
             *   *  15.5.1 固定定位 - fixed
                 *  15.5.2 画布和视口
             *  15.6 布局-元素定位-固定定位的练习
             *   *  15.6.1 固定定位练习
             *  15.7 布局-元素定位-绝对定位的参考对象
             *   *  15.7.1 绝对定位 - absolute
             *  15.8 布局-元素定位-增强案例子绝父相
             *   *  15.8.1 子绝父相
             *  15.9 布局-position设置为fixed或者absolute
             *   *  15.9.1 将position设置为absolute/fixed元素的特点(一)
                 *  15.9.2 将position设置为absolute/fixed元素的特点(二)
             *  15.10 值设置auto的效果总结
             *   *  15.10.1 auto到底是什么?
             *  15.11 布局-绝对定位练习 网易item
             *   *  15.11.1 绝对定位的案例练习
             *  15.12 布局-粘性定位sticky的使用
             *   *  15.12.1 粘性定位 - sticky
                 *  15.12.3 position值对比
             *  15.13 布局-定位元素的z-index设置
             *   *  15.13.1 CSS属性 - z-index

![在这里插入图片描述][35c09b17c1834022a0c97061395606c3.png_pic_center]

#### 一 HTML+CSS ####

#### 15 CSS元素定位 ####

##### 15.1 布局-元素定位-标准流的理解 #####

###### 15.1.1 标准流（Normal Flow） ######

*  默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
    
     *  从左到右、从上到下按顺序摆放好
     *  默认情况下，互相之间不存在层叠现象

![在这里插入图片描述][175556f8b3da440db9e834c6de6923fc.png_pic_center]

渲染效果

![在这里插入图片描述][dcb8aeb3011144d1a542e9a2e3a091e4.png_pic_center]

###### 15.1.2 margin-padding位置调整 ######

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

##### 15.2 布局-元素定位-position属性介绍 #####

###### 15.2.1 认识元素的定位 ######

*  定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为:
    
     *  例如放在另一个元素的上面;
     *  或者始终保持在浏览器视窗内的同一位置;
 *  定位在开发中非常常见:

![在这里插入图片描述][7bf1d6da71414ac7bdc00c3d504c835a.png_pic_center]

###### 15.2.2 认识position属性 ######

*  利用position可以对元素进行定位，常用取值有5个:
    
    ![在这里插入图片描述][9c3b03c0131b44afbba5415f5d3799b1.png_pic_center]
 *  默认值:
    
     *  static：默认值, 静态定位
        
        ![在这里插入图片描述][b144f967882a4e1199b4cc63d6142daa.png_pic_center]
 *  使用下面的值, 可以让元素变成 定位元素(positioned element)
    
     *  relative：相对定位
     *  absolute：绝对定位
     *  fixed：固定定位
     *  sticky：粘性定位

###### 15.2.3 静态定位 - static ######

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

![在这里插入图片描述][0d415ec9d36f432a8cf98566c7fbc0ae.png_pic_center]

没有任何改变，可以认为在static 模式下，这些属性没有被激活。

##### 15.3 布局-元素定位-相对定位的使用 #####

###### 15.3.1 相对定位 - relative ######

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

<!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>
        .text {
         
          /* margin-left: 30px; */
    
          /* relative: 相对定位 */
          position: relative;
          left: -30px;
          top: -50px;
          /* bottom: 50px;
          right: 30px; */
        }
      </style>
    </head>
    
    <body>
    
      <span>我是span元素</span>
      <strong class="text">我是strong元素</strong>
      <img src="../images/kobe01.jpg" alt="">
      <div>我是div元素</div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][82c47d1b980642bea6f25d568f27cbfb.png_pic_center]

没毛病，left 为负值，往左边走，top为负值，往上面走。

###### 15.3.2 相对定位练习 ######

<!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>
        div {
         
          font-size: 20px;
        }
    
        span {
         
          font-size: 12px;
          position: relative;
          bottom: 8px;
        }
      </style>
    </head>
    
    <body>
    
      <div>
        3<span>2</span> + 2<span>3</span> = 17
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][bb836644c2f64c6aa50fe1b4498181a2.png_pic_center]

##### 15.4 布局-元素定位-梦幻西游案例 #####

###### 15.4.1 相对定位练习 ######

![在这里插入图片描述][8a47ed8749ab41b195bf77f9313c1414.png_pic_center]

如果直接用背景图片来实现

渲染效果

![在这里插入图片描述][0be046fb83ec4e46b2a6b2bd7ab97a25.png_pic_center]

这个没啥问题，它会一直处于中间位置

但是如果要用相对定位来实现

<!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 {
         
          height: 489px;
          background-color: #f00;
          overflow: hidden;
        }
    
        .box img {
         
          position: relative;
          /* left: 图片的一般 */
          left: -960px;
          /* translate中的百分比是相对于自己 */
          /* transform: translate(-50%); */
    
          /* 向右边移动div的一般 */
          margin-left: 50%;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        <img src="../images/mhxy.jpg" alt="">
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][958e31a202304b7a887e4eb180cefde9.png_pic_center]

这样也可以实现。

##### 15.5 布局-元素定位-固定定位的使用 #####

###### 15.5.1 固定定位 - fixed ######

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

<!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>
        .text {
         
          position: fixed;
          right: 30px;
          bottom: 30px;
        }
      </style>
    </head>
    
    <body>
    
      <span>我是span元素</span>
      <strong class="text">我是strong元素</strong>
      <img src="../images/kobe01.jpg" alt="">
      <div>我是div元素</div>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
      <br><br><br><br>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][7de3875b314c4670bbb3f7354d9bf342.png_pic_center]

滑动窗口

![在这里插入图片描述][3596f452e96b48aba78fc879a28fd85a.png_pic_center]

它会一直在这儿

###### 15.5.2 画布和视口 ######

*  视口（Viewport）
    
     *  文档的可视区域
     *  如下图红框所示
    
    ![在这里插入图片描述][5a63b95fbdd24c5893ef6a1ba1d2e7a3.png_pic_center]
 *  画布（Canvas）
    
     *  用于渲染文档的区域
     *  文档内容超出视口范围，可以通过滚动查看
     *  如下图黑框所示
    
    ![在这里插入图片描述][f333023b44e04c9c89af9244ff4d7b60.png_pic_center]
 *  宽高对比
    
     *  画布 >= 视口

##### 15.6 布局-元素定位-固定定位的练习 #####

###### 15.6.1 固定定位练习 ######

![在这里插入图片描述][b2a4dcab76094e98a722efba9ab526ec.png_pic_center]

<!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>
        .handle {
         
          position: fixed;
          right: 30px;
          bottom: 30px;
        }
    
        .handle .item {
         
          width: 80px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          background-color: brown;
          color: #fff;
          border-radius: 8px;
          cursor: pointer;
        }
    
        .handle .item:hover {
         
          background-color: red;
        }
    
        .top {
         
          margin-bottom: 10px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="handle">
        <div class="item top">顶部</div>
        <div class="item bottom">反馈</div>
      </div>
    
      <br><br><br><br><br>
      <br><br><br><br><br>
      <br><br><br><br><br>
      <br><br><br><br><br>
      <br><br><br><br><br>
      <br><br><br><br><br>
      <br><br><br><br><br>
      <br><br><br><br><br>
      <br><br><br><br><br>
      <br><br><br><br><br>
    
    </body>
    
    </html>

渲染效果

=![在这里插入图片描述][92b4445dc4c04266b8375df0cae256b2.png_pic_center]

![在这里插入图片描述][81891abdcfa14b188c7c237a53b75bf3.png_pic_center]

没问题

##### 15.7 布局-元素定位-绝对定位的参考对象 #####

###### 15.7.1 绝对定位 - absolute ######

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

渲染效果

![在这里插入图片描述][e672136a8e16462ca58704400a9adedc.png_pic_center]

没问题

##### 15.8 布局-元素定位-增强案例子绝父相 #####

###### 15.8.1 子绝父相 ######

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

渲染效果

![在这里插入图片描述][2259b2039c324dd092fb477b7c8c9452.png_pic_center]

没问题。

##### 15.9 布局-position设置为fixed或者absolute #####

###### 15.9.1 将position设置为absolute/fixed元素的特点(一) ######

*  可以随意设置宽高
    
    ![在这里插入图片描述][93891054dfa1487b97291e3a646b55ee.png_pic_center]
 *  宽高默认由内容决定
 *  不再受标准流的约束
    
     *  不再严格按照从上到下、从左到右排布
     *  不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)的很多特性都会消失
 *  不再给父元素汇报宽高数据
 *  脱标元素内部默认还是按照标准流布局
    
    ![在这里插入图片描述][80df3eb02dcd43ab9eb9fcc9205098ad.png_pic_center]

###### 15.9.2 将position设置为absolute/fixed元素的特点(二) ######

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

渲染效果

![在这里插入图片描述][42f28c38a16a4e228c74e03c02e95793.png_pic_center]

##### 15.10 值设置auto的效果总结 #####

###### 15.10.1 auto到底是什么? ######

*  800 = 200 + ml0 + mr0 + 0 + 0
 *  auto -> 交给浏览器你来出来
 *  width: auto;

1.  行内非替换元素 -> width: 包裹内容
2.  块级元素 ->width: 包含块的宽度
3.  绝对定位元素 -> width: 包裹内容

##### 15.11 布局-绝对定位练习 网易item #####

###### 15.11.1 绝对定位的案例练习 ######

![在这里插入图片描述][7e3f566f01a04bc2acc925b7cbe16749.png_pic_center]

<!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;
        }
    
        /* 布局代码 */
        .item {
         
          width: 140px;
          margin: 0 auto;
        }
    
        .item .top {
         
          position: relative;
        }
    
        .item .top img {
         
          /* 将图片下面的多出来的区域去除 */
          vertical-align: top;
          /* display: block; */
        }
    
        .item .top .cover {
         
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
    
          background-image: url(../images/music_sprite_01.png);
          background-position: 0 0;
        }
    
        .item .top .info {
         
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 27px;
          padding-left: 10px;
          line-height: 27px;
    
          font-size: 12px;
          color: #ccc;
    
          background-image: url(../images/music_sprite_01.png);
          background-position: 0 -537px;
        }
    
        .item .top .info .icon-music {
         
          position: relative;
          top: 1px;
          /* display: inline-block; */
          /* width: 14px;
          height: 11px; */
    
          /* background-image: url(../images/music_sprite_02.png); */
          /* background-position: 0 -24px; */
        }
    
        .item .top .info .count {
         
          margin-left: 4px;
        }
    
        .item .top .info .icon-play {
         
          position: absolute;
          top: 0;
          bottom: 0;
          right: 10px;
          margin: auto 0;
    
          /* display: inline-block; */
          /* width: 16px;
          height: 17px; */
          /* background-image: url(../images/music_sprite_02.png); */
          /* background-position: 0 0; */
        }
    
    
        /* 底部的样式 */
        .item .bottom {
         
          display: block;
          margin-top: 8px;
          font-size: 14px;
        }
    
        .item .bottom:hover {
         
          text-decoration: underline;
        }
      </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>

渲染效果

![在这里插入图片描述][fbd4006ecad24c329c180af4e2a1eafc.png_pic_center]

##### 15.12 布局-粘性定位sticky的使用 #####

###### 15.12.1 粘性定位 - sticky ######

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

![在这里插入图片描述][e1f0d0d41bc64fd8a51ce2f5a70bf1ef.png_pic_center]

<!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>
        .nav {
         
          background-color: #f00;
          color: #fff;
    
          /* position: relative;
          top: 0;
          left: 0;
          right: 0; */
          position: sticky;
          top: 0;
        }
      </style>
    </head>
    
    <body>
    
      <h1>我是标题</h1>
      <div class="nav">
        <span>电脑</span>
        <span>手机</span>
        <span>衣服</span>
        <span>鞋子</span>
      </div>
      <ul>
        <li>电脑列表1</li>
        <li>电脑列表2</li>
        <li>电脑列表3</li>
        <li>电脑列表4</li>
        <li>电脑列表5</li>
        <li>电脑列表6</li>
        <li>电脑列表7</li>
        <li>电脑列表8</li>
        <li>电脑列表9</li>
        <li>电脑列表10</li>
        <li>电脑列表11</li>
        <li>电脑列表12</li>
        <li>电脑列表13</li>
        <li>电脑列表14</li>
        <li>电脑列表15</li>
        <li>电脑列表16</li>
        <li>电脑列表17</li>
        <li>电脑列表18</li>
        <li>电脑列表19</li>
        <li>电脑列表20</li>
        <li>电脑列表21</li>
        <li>电脑列表22</li>
        <li>电脑列表23</li>
        <li>电脑列表24</li>
        <li>电脑列表25</li>
        <li>电脑列表26</li>
        <li>电脑列表27</li>
        <li>电脑列表28</li>
        <li>电脑列表29</li>
        <li>电脑列表30</li>
        <li>电脑列表31</li>
        <li>电脑列表32</li>
        <li>电脑列表33</li>
        <li>电脑列表34</li>
        <li>电脑列表35</li>
        <li>电脑列表36</li>
        <li>电脑列表37</li>
        <li>电脑列表38</li>
        <li>电脑列表39</li>
        <li>电脑列表40</li>
        <li>电脑列表41</li>
        <li>电脑列表42</li>
        <li>电脑列表43</li>
        <li>电脑列表44</li>
        <li>电脑列表45</li>
        <li>电脑列表46</li>
        <li>电脑列表47</li>
        <li>电脑列表48</li>
        <li>电脑列表49</li>
        <li>电脑列表50</li>
        <li>电脑列表51</li>
        <li>电脑列表52</li>
        <li>电脑列表53</li>
        <li>电脑列表54</li>
        <li>电脑列表55</li>
        <li>电脑列表56</li>
        <li>电脑列表57</li>
        <li>电脑列表58</li>
        <li>电脑列表59</li>
        <li>电脑列表60</li>
        <li>电脑列表61</li>
        <li>电脑列表62</li>
        <li>电脑列表63</li>
        <li>电脑列表64</li>
        <li>电脑列表65</li>
        <li>电脑列表66</li>
        <li>电脑列表67</li>
        <li>电脑列表68</li>
        <li>电脑列表69</li>
        <li>电脑列表70</li>
        <li>电脑列表71</li>
        <li>电脑列表72</li>
        <li>电脑列表73</li>
        <li>电脑列表74</li>
        <li>电脑列表75</li>
        <li>电脑列表76</li>
        <li>电脑列表77</li>
        <li>电脑列表78</li>
        <li>电脑列表79</li>
        <li>电脑列表80</li>
        <li>电脑列表81</li>
        <li>电脑列表82</li>
        <li>电脑列表83</li>
        <li>电脑列表84</li>
        <li>电脑列表85</li>
        <li>电脑列表86</li>
        <li>电脑列表87</li>
        <li>电脑列表88</li>
        <li>电脑列表89</li>
        <li>电脑列表90</li>
        <li>电脑列表91</li>
        <li>电脑列表92</li>
        <li>电脑列表93</li>
        <li>电脑列表94</li>
        <li>电脑列表95</li>
        <li>电脑列表96</li>
        <li>电脑列表97</li>
        <li>电脑列表98</li>
        <li>电脑列表99</li>
        <li>电脑列表100</li>
      </ul>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][cda244ec42ac402180d7a87f4c3ac37f.png_pic_center]

滑下去

![在这里插入图片描述][0f94e62843d4472089774c99328ef83c.png_pic_center]

也可以整一个临时的滚动视口

<!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>
        .box {
         
          width: 500px;
          height: 500px;
          margin: 100px auto 0;
          overflow: scroll;
          background-color: #ccc;
        }
    
        .nav {
         
          background-color: #f00;
          color: #fff;
          position: sticky;
          top: 0;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        <h1>我是标题</h1>
        <div class="nav">
          <span>电脑</span>
          <span>手机</span>
          <span>衣服</span>
          <span>鞋子</span>
        </div>
        <ul>
          <li>电脑列表1</li>
          <li>电脑列表2</li>
          <li>电脑列表3</li>
          <li>电脑列表4</li>
          <li>电脑列表5</li>
          <li>电脑列表6</li>
          <li>电脑列表7</li>
          <li>电脑列表8</li>
          <li>电脑列表9</li>
          <li>电脑列表10</li>
          <li>电脑列表11</li>
          <li>电脑列表12</li>
          <li>电脑列表13</li>
          <li>电脑列表14</li>
          <li>电脑列表15</li>
          <li>电脑列表16</li>
          <li>电脑列表17</li>
          <li>电脑列表18</li>
          <li>电脑列表19</li>
          <li>电脑列表20</li>
          <li>电脑列表21</li>
          <li>电脑列表22</li>
          <li>电脑列表23</li>
          <li>电脑列表24</li>
          <li>电脑列表25</li>
          <li>电脑列表26</li>
          <li>电脑列表27</li>
          <li>电脑列表28</li>
          <li>电脑列表29</li>
          <li>电脑列表30</li>
          <li>电脑列表31</li>
          <li>电脑列表32</li>
          <li>电脑列表33</li>
          <li>电脑列表34</li>
          <li>电脑列表35</li>
          <li>电脑列表36</li>
          <li>电脑列表37</li>
          <li>电脑列表38</li>
          <li>电脑列表39</li>
          <li>电脑列表40</li>
          <li>电脑列表41</li>
          <li>电脑列表42</li>
          <li>电脑列表43</li>
          <li>电脑列表44</li>
          <li>电脑列表45</li>
          <li>电脑列表46</li>
          <li>电脑列表47</li>
          <li>电脑列表48</li>
          <li>电脑列表49</li>
          <li>电脑列表50</li>
          <li>电脑列表51</li>
          <li>电脑列表52</li>
          <li>电脑列表53</li>
          <li>电脑列表54</li>
          <li>电脑列表55</li>
          <li>电脑列表56</li>
          <li>电脑列表57</li>
          <li>电脑列表58</li>
          <li>电脑列表59</li>
          <li>电脑列表60</li>
          <li>电脑列表61</li>
          <li>电脑列表62</li>
          <li>电脑列表63</li>
          <li>电脑列表64</li>
          <li>电脑列表65</li>
          <li>电脑列表66</li>
          <li>电脑列表67</li>
          <li>电脑列表68</li>
          <li>电脑列表69</li>
          <li>电脑列表70</li>
          <li>电脑列表71</li>
          <li>电脑列表72</li>
          <li>电脑列表73</li>
          <li>电脑列表74</li>
          <li>电脑列表75</li>
          <li>电脑列表76</li>
          <li>电脑列表77</li>
          <li>电脑列表78</li>
          <li>电脑列表79</li>
          <li>电脑列表80</li>
          <li>电脑列表81</li>
          <li>电脑列表82</li>
          <li>电脑列表83</li>
          <li>电脑列表84</li>
          <li>电脑列表85</li>
          <li>电脑列表86</li>
          <li>电脑列表87</li>
          <li>电脑列表88</li>
          <li>电脑列表89</li>
          <li>电脑列表90</li>
          <li>电脑列表91</li>
          <li>电脑列表92</li>
          <li>电脑列表93</li>
          <li>电脑列表94</li>
          <li>电脑列表95</li>
          <li>电脑列表96</li>
          <li>电脑列表97</li>
          <li>电脑列表98</li>
          <li>电脑列表99</li>
          <li>电脑列表100</li>
        </ul>
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][4f0858eed421418798ea093f7e0c64c8.png_pic_center]

###### 15.12.3 position值对比 ######

![在这里插入图片描述][3251e57818764bed9def7cea9df69574.png_pic_center]

##### 15.13 布局-定位元素的z-index设置 #####

###### 15.13.1 CSS属性 - z-index ######

*  z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）
    
     *  取值可以是正整数、负整数、0
 *  比较原则
    
     *  如果是兄弟关系
        
         *  z-index越大，层叠在越上面
         *  z-index相等，写在后面的那个元素层叠在上面
     *  如果不是兄弟关系
        
         *  各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
         *  而且这2个定位元素必须有设置z-index的具体数值

![在这里插入图片描述][3e0da67fce2e45c0b445034f502060b6.png_pic_center]

渲染效果

![在这里插入图片描述][b72fd2a8205a49a19eb42e8abecb1fa5.png_pic_center]

如果是兄弟比较

渲染效果

![在这里插入图片描述][b50c094b4f404b5aab725086f70ac7ee.png_pic_center]

[35c09b17c1834022a0c97061395606c3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/bdfd5e9a8e74413496d363dd69dca522.png
[175556f8b3da440db9e834c6de6923fc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6849be54138540b2896e394f55f6bc2a.png
[dcb8aeb3011144d1a542e9a2e3a091e4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/127f41e3079f4b47ae30d7e62a76e61e.png
[7bf1d6da71414ac7bdc00c3d504c835a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/49f3cc2ceb3d46829a52fc2eb5d49856.png
[9c3b03c0131b44afbba5415f5d3799b1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b2d964ea4bba4e8b81a8be0fdce4d352.png
[b144f967882a4e1199b4cc63d6142daa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/350c512a160a4fd885b34f9774c0e222.png
[0d415ec9d36f432a8cf98566c7fbc0ae.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/49df6df6285044dfb88fc21983779dfa.png
[ef85bf02719442ed80f804099584bf71.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f76ec23a466745b494eaa3f79dc9b5d9.png
[82c47d1b980642bea6f25d568f27cbfb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7e5963ac819140d8a03570d4eca93377.png
[bb836644c2f64c6aa50fe1b4498181a2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d8e65cfb34f74bcaa0ed4fa16222700d.png
[8a47ed8749ab41b195bf77f9313c1414.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c1d0d9b814854952936cb13ea0012d43.png
[0be046fb83ec4e46b2a6b2bd7ab97a25.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/570ffaf265894cccae698451bc7440bf.png
[958e31a202304b7a887e4eb180cefde9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c203db70de83443fb078babd61d19444.png
[7de3875b314c4670bbb3f7354d9bf342.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e272f16fd21f488b8f3cffcda385d530.png
[3596f452e96b48aba78fc879a28fd85a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/812c667dd4ec42a59430a9557dfc128e.png
[5a63b95fbdd24c5893ef6a1ba1d2e7a3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4fc21027f82b4750af67d6c0fa74725b.png
[f333023b44e04c9c89af9244ff4d7b60.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a90b5a334a1d410d990cd812f098056b.png
[b2a4dcab76094e98a722efba9ab526ec.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4a4baaa193bd4a91a9bb0a3a34aaaf57.png
[92b4445dc4c04266b8375df0cae256b2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ec21bb70931d41b5913612bc86403cfe.png
[81891abdcfa14b188c7c237a53b75bf3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/082d3f2744ee43f8831ceaa9e77d2a4d.png
[e672136a8e16462ca58704400a9adedc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8a1faa667525424ca1e989fa61ff2aa3.png
[2259b2039c324dd092fb477b7c8c9452.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1c14088b11634b109fcfc1d4eec6fd25.png
[93891054dfa1487b97291e3a646b55ee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4bbb56b1924040b5b97eebbefe384daa.png
[80df3eb02dcd43ab9eb9fcc9205098ad.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7727f227bb7340a8b776d2258aa6b09b.png
[42f28c38a16a4e228c74e03c02e95793.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/20832e02b11f42c19120d2d238efe79d.png
[7e3f566f01a04bc2acc925b7cbe16749.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/fe6233ab32a84d348b69105223fdc72b.png
[fbd4006ecad24c329c180af4e2a1eafc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a14f71f9f9484bd980815377ea227c3e.png
[e1f0d0d41bc64fd8a51ce2f5a70bf1ef.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4772cbefc5b84107851bd439c1594d75.png
[cda244ec42ac402180d7a87f4c3ac37f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/5fb3f712d6d4472abeb813cc8119d34a.png
[0f94e62843d4472089774c99328ef83c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6b256091e9604d2eaca01a4a27882bc2.png
[4f0858eed421418798ea093f7e0c64c8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b5e563b1628d4feebc7fb708474a0e70.png
[3251e57818764bed9def7cea9df69574.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ec27924f9a574c41920dca352d47cdd5.png
[3e0da67fce2e45c0b445034f502060b6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8c7c7200602f4bf2bb3663753c889c4d.png
[b72fd2a8205a49a19eb42e8abecb1fa5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/70b021486c5147dc9fdeabdf8164e5bd.png
[b50c094b4f404b5aab725086f70ac7ee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/77f486842b334d169ad65adc2dad297e.png