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

r囧r小猫 2024-03-22 17:13 218阅读 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

在这里插入图片描述

一 HTML+CSS

15 CSS元素定位

15.1 布局-元素定位-标准流的理解
15.1.1 标准流（Normal Flow）

  • 默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布

    • 从左到右、从上到下按顺序摆放好
    • 默认情况下，互相之间不存在层叠现象

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .box {
  12.       display: inline-block;
  13.       width: 200px;
  14.       height: 200px;
  15.       background-color: aqua;
  16.     }
  17.   </style>
  18. </head>
  20. <body>
  22.   <div>div元素</div>
  23.   <span>span元素</span>
  24.   <img src="../images/gouwujie01.jpg" alt="">
  25.   <div class="box"></div>
  27. </body>
  29. </html>

渲染效果

在这里插入图片描述

15.1.2 margin-padding位置调整

  • 在标准流中，可以使用margin、padding对元素进行定位

    • 其中margin还可以设置负数

  • 比较明显的缺点是

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

  • 如果我们希望一个元素可以跳出标准流,单独的对某个元素进行定位呢?

    • 我们可以通过position属性来进行设置;
15.2 布局-元素定位-position属性介绍
15.2.1 认识元素的定位

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

    • 例如放在另一个元素的上面;
    • 或者始终保持在浏览器视窗内的同一位置;
  • 定位在开发中非常常见:

在这里插入图片描述

15.2.2 认识position属性

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

    在这里插入图片描述

  • 默认值:

    • static：默认值, 静态定位

      在这里插入图片描述

  • 使用下面的值, 可以让元素变成 定位元素(positioned element)

    • relative：相对定位
    • absolute：绝对定位
    • fixed：固定定位
    • sticky：粘性定位
15.2.3 静态定位 - static

  • position属性的默认值

    • 元素按照normal flow布局
    • left 、right、top、bottom没有任何作用

在这里插入图片描述

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

15.3 布局-元素定位-相对定位的使用
15.3.1 相对定位 - relative
  • 元素按照normal flow布局

  • 可以通过left、right、top、bottom进行定位

    • 定位参照对象是元素自己原来的位置

  • left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示

    在这里插入图片描述

  • 相对定位的应用场景

    • 在不影响其他元素位置的前提下，对当前元素位置进行微调

    <!DOCTYPE html>







    Document





    我是span元素
    我是strong元素

    我是div元素




渲染效果

在这里插入图片描述

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

15.3.2 相对定位练习
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     div {
  12.       font-size: 20px;
  13.     }
  15.     span {
  17.       font-size: 12px;
  18.       position: relative;
  19.       bottom: 8px;
  20.     }
  21.   </style>
  22. </head>
  24. <body>
  26.   <div>
  27.     3<span>2</span> + 2<span>3</span> = 17
  28.   </div>
  30. </body>
  32. </html>

渲染效果

在这里插入图片描述

15.4 布局-元素定位-梦幻西游案例
15.4.1 相对定位练习

在这里插入图片描述

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     body {
  12.       margin: 0;
  13.       padding: 0;
  14.     }
  16.     .box {
  18.       height: 489px;
  19.       background-color: #f00;
  20.       background: url(../images/mhxy.jpg) center;
  21.     }
  22.   </style>
  23. </head>
  25. <body>
  27.   <div class="box"></div>
  29. </body>
  31. </html>

渲染效果

在这里插入图片描述

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     body {
  12.       margin: 0;
  13.       padding: 0;
  14.     }
  16.     .box {
  18.       height: 489px;
  19.       background-color: #f00;
  20.       overflow: hidden;
  21.     }
  23.     .box img {
  25.       position: relative;
  26.       /* left: 图片的一般 */
  27.       left: -960px;
  28.       /* translate中的百分比是相对于自己 */
  29.       /* transform: translate(-50%); */
  31.       /* 向右边移动div的一般 */
  32.       margin-left: 50%;
  33.     }
  34.   </style>
  35. </head>
  37. <body>
  39.   <div class="box">
  40.     <img src="../images/mhxy.jpg" alt="">
  41.   </div>
  43. </body>
  45. </html>

渲染效果

在这里插入图片描述

这样也可以实现。

15.5 布局-元素定位-固定定位的使用
15.5.1 固定定位 - fixed
  • 元素脱离normal flow（脱离标准流、脱标）
  • 可以通过left、right、top、bottom进行定位
  • 定位参照对象是视口（viewport）

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

    <!DOCTYPE html>







    Document





    我是span元素
    我是strong元素

    我是div元素








































































































渲染效果

在这里插入图片描述

滑动窗口

在这里插入图片描述

它会一直在这儿

15.5.2 画布和视口

  • 视口（Viewport）

    • 文档的可视区域
    • 如下图红框所示

    在这里插入图片描述

  • 画布（Canvas）

    • 用于渲染文档的区域
    • 文档内容超出视口范围，可以通过滚动查看
    • 如下图黑框所示

    在这里插入图片描述

  • 宽高对比

    • 画布 >= 视口
15.6 布局-元素定位-固定定位的练习
15.6.1 固定定位练习

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .handle {
  12.       position: fixed;
  13.       right: 30px;
  14.       bottom: 30px;
  15.     }
  17.     .handle .item {
  19.       width: 80px;
  20.       height: 40px;
  21.       text-align: center;
  22.       line-height: 40px;
  23.       background-color: brown;
  24.       color: #fff;
  25.       border-radius: 8px;
  26.       cursor: pointer;
  27.     }
  29.     .handle .item:hover {
  31.       background-color: red;
  32.     }
  34.     .top {
  36.       margin-bottom: 10px;
  37.     }
  38.   </style>
  39. </head>
  41. <body>
  43.   <div class="handle">
  44.     <div class="item top">顶部</div>
  45.     <div class="item bottom">反馈</div>
  46.   </div>
  48.   <br><br><br><br><br>
  49.   <br><br><br><br><br>
  50.   <br><br><br><br><br>
  51.   <br><br><br><br><br>
  52.   <br><br><br><br><br>
  53.   <br><br><br><br><br>
  54.   <br><br><br><br><br>
  55.   <br><br><br><br><br>
  56.   <br><br><br><br><br>
  57.   <br><br><br><br><br>
  59. </body>
  61. </html>

渲染效果

=在这里插入图片描述

在这里插入图片描述

没问题

15.7 布局-元素定位-绝对定位的参考对象
15.7.1 绝对定位 - absolute
  • 元素脱离normal flow（脱离标准流、脱标）

  • 可以通过left、right、top、bottom进行定位

    • 定位参照对象是最邻近的定位祖先元素 【如果没有定位，那压根儿没关系】
    • 如果找不到这样的祖先元素，参照对象是视口

  • 定位元素（positioned element）

    • position值不为static的元素
    • 也就是position值为relative、absolute、fixed的元素

    <!DOCTYPE html>







    Document




    哈哈哈啊



    我是span元素
    我是strong元素

    我是div元素



    呵呵呵呵




渲染效果

在这里插入图片描述

没问题

15.8 布局-元素定位-增强案例子绝父相
15.8.1 子绝父相
  • 在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位

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

    • 父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
    • 子元素设置position: absolute
    • 简称为“子绝父相”

    <!DOCTYPE html>







    Document







    我是span元素
    我是strong元素

    我是div元素






渲染效果

在这里插入图片描述

没问题。

15.9 布局-position设置为fixed或者absolute
15.9.1 将position设置为absolute/fixed元素的特点(一)

  • 可以随意设置宽高

    在这里插入图片描述

  • 宽高默认由内容决定

  • 不再受标准流的约束

    • 不再严格按照从上到下、从左到右排布
    • 不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)的很多特性都会消失
  • 不再给父元素汇报宽高数据

  • 脱标元素内部默认还是按照标准流布局

    在这里插入图片描述

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

    <!DOCTYPE html>







    Document











渲染效果

在这里插入图片描述

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 绝对定位的案例练习

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     /* 重置代码 */
  11.     a {
  13.       text-decoration: none;
  14.       color: #333;
  15.     }
  17.     /* 公共的CSS */
  18.     .sprite_01 {
  20.       background-image: url(../images/music_sprite_01.png);
  21.       display: inline-block;
  22.     }
  24.     .sprite_02 {
  26.       background-image: url(../images/music_sprite_02.png);
  27.       display: inline-block;
  28.     }
  30.     .sprite_02_icon_music {
  32.       width: 14px;
  33.       height: 11px;
  34.       background-position: 0 -24px;
  35.     }
  37.     .sprite_02_icon_play {
  39.       width: 16px;
  40.       height: 17px;
  41.       background-position: 0 0;
  42.     }
  44.     /* 布局代码 */
  45.     .item {
  47.       width: 140px;
  48.       margin: 0 auto;
  49.     }
  51.     .item .top {
  53.       position: relative;
  54.     }
  56.     .item .top img {
  58.       /* 将图片下面的多出来的区域去除 */
  59.       vertical-align: top;
  60.       /* display: block; */
  61.     }
  63.     .item .top .cover {
  65.       position: absolute;
  66.       top: 0;
  67.       bottom: 0;
  68.       left: 0;
  69.       right: 0;
  71.       background-image: url(../images/music_sprite_01.png);
  72.       background-position: 0 0;
  73.     }
  75.     .item .top .info {
  77.       position: absolute;
  78.       bottom: 0;
  79.       left: 0;
  80.       right: 0;
  81.       height: 27px;
  82.       padding-left: 10px;
  83.       line-height: 27px;
  85.       font-size: 12px;
  86.       color: #ccc;
  88.       background-image: url(../images/music_sprite_01.png);
  89.       background-position: 0 -537px;
  90.     }
  92.     .item .top .info .icon-music {
  94.       position: relative;
  95.       top: 1px;
  96.       /* display: inline-block; */
  97.       /* width: 14px;
  98.       height: 11px; */
  100.       /* background-image: url(../images/music_sprite_02.png); */
  101.       /* background-position: 0 -24px; */
  102.     }
  104.     .item .top .info .count {
  106.       margin-left: 4px;
  107.     }
  109.     .item .top .info .icon-play {
  111.       position: absolute;
  112.       top: 0;
  113.       bottom: 0;
  114.       right: 10px;
  115.       margin: auto 0;
  117.       /* display: inline-block; */
  118.       /* width: 16px;
  119.       height: 17px; */
  120.       /* background-image: url(../images/music_sprite_02.png); */
  121.       /* background-position: 0 0; */
  122.     }
  125.     /* 底部的样式 */
  126.     .item .bottom {
  128.       display: block;
  129.       margin-top: 8px;
  130.       font-size: 14px;
  131.     }
  133.     .item .bottom:hover {
  135.       text-decoration: underline;
  136.     }
  137.   </style>
  138. </head>
  140. <body>
  142.   <div class="item">
  143.     <div class="top">
  144.       <img src="../images/music_album01.jpg" alt="音乐封面">
  145.       <a class="cover" href="#"></a>
  146.       <div class="info">
  147.         <i class="sprite_02 sprite_02_icon_music icon-music"></i>
  148.         <span class="count">62万</span>
  149.         <i class="sprite_02 sprite_02_icon_play icon-play"></i>
  150.       </div>
  151.     </div>
  152.     <a class="bottom" href="#">
  153.       天气好的话，把耳机分给我一半吧
  154.     </a>
  155.     <i class="sprite_02 sprite_02_icon_play"></i>
  156.     <i class="sprite_02 sprite_02_icon_music"></i>
  157.   </div>
  159. </body>
  161. </html>

渲染效果

在这里插入图片描述

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

  • 另外还有一个定位的值是position: sticky，比起其他定位值要新一些.

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

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .nav {
  12.       background-color: #f00;
  13.       color: #fff;
  15.       /* position: relative;
  16.       top: 0;
  17.       left: 0;
  18.       right: 0; */
  19.       position: sticky;
  20.       top: 0;
  21.     }
  22.   </style>
  23. </head>
  25. <body>
  27.   <h1>我是标题</h1>
  28.   <div class="nav">
  29.     <span>电脑</span>
  30.     <span>手机</span>
  31.     <span>衣服</span>
  32.     <span>鞋子</span>
  33.   </div>
  34.   <ul>
  35.     <li>电脑列表1</li>
  36.     <li>电脑列表2</li>
  37.     <li>电脑列表3</li>
  38.     <li>电脑列表4</li>
  39.     <li>电脑列表5</li>
  40.     <li>电脑列表6</li>
  41.     <li>电脑列表7</li>
  42.     <li>电脑列表8</li>
  43.     <li>电脑列表9</li>
  44.     <li>电脑列表10</li>
  45.     <li>电脑列表11</li>
  46.     <li>电脑列表12</li>
  47.     <li>电脑列表13</li>
  48.     <li>电脑列表14</li>
  49.     <li>电脑列表15</li>
  50.     <li>电脑列表16</li>
  51.     <li>电脑列表17</li>
  52.     <li>电脑列表18</li>
  53.     <li>电脑列表19</li>
  54.     <li>电脑列表20</li>
  55.     <li>电脑列表21</li>
  56.     <li>电脑列表22</li>
  57.     <li>电脑列表23</li>
  58.     <li>电脑列表24</li>
  59.     <li>电脑列表25</li>
  60.     <li>电脑列表26</li>
  61.     <li>电脑列表27</li>
  62.     <li>电脑列表28</li>
  63.     <li>电脑列表29</li>
  64.     <li>电脑列表30</li>
  65.     <li>电脑列表31</li>
  66.     <li>电脑列表32</li>
  67.     <li>电脑列表33</li>
  68.     <li>电脑列表34</li>
  69.     <li>电脑列表35</li>
  70.     <li>电脑列表36</li>
  71.     <li>电脑列表37</li>
  72.     <li>电脑列表38</li>
  73.     <li>电脑列表39</li>
  74.     <li>电脑列表40</li>
  75.     <li>电脑列表41</li>
  76.     <li>电脑列表42</li>
  77.     <li>电脑列表43</li>
  78.     <li>电脑列表44</li>
  79.     <li>电脑列表45</li>
  80.     <li>电脑列表46</li>
  81.     <li>电脑列表47</li>
  82.     <li>电脑列表48</li>
  83.     <li>电脑列表49</li>
  84.     <li>电脑列表50</li>
  85.     <li>电脑列表51</li>
  86.     <li>电脑列表52</li>
  87.     <li>电脑列表53</li>
  88.     <li>电脑列表54</li>
  89.     <li>电脑列表55</li>
  90.     <li>电脑列表56</li>
  91.     <li>电脑列表57</li>
  92.     <li>电脑列表58</li>
  93.     <li>电脑列表59</li>
  94.     <li>电脑列表60</li>
  95.     <li>电脑列表61</li>
  96.     <li>电脑列表62</li>
  97.     <li>电脑列表63</li>
  98.     <li>电脑列表64</li>
  99.     <li>电脑列表65</li>
  100.     <li>电脑列表66</li>
  101.     <li>电脑列表67</li>
  102.     <li>电脑列表68</li>
  103.     <li>电脑列表69</li>
  104.     <li>电脑列表70</li>
  105.     <li>电脑列表71</li>
  106.     <li>电脑列表72</li>
  107.     <li>电脑列表73</li>
  108.     <li>电脑列表74</li>
  109.     <li>电脑列表75</li>
  110.     <li>电脑列表76</li>
  111.     <li>电脑列表77</li>
  112.     <li>电脑列表78</li>
  113.     <li>电脑列表79</li>
  114.     <li>电脑列表80</li>
  115.     <li>电脑列表81</li>
  116.     <li>电脑列表82</li>
  117.     <li>电脑列表83</li>
  118.     <li>电脑列表84</li>
  119.     <li>电脑列表85</li>
  120.     <li>电脑列表86</li>
  121.     <li>电脑列表87</li>
  122.     <li>电脑列表88</li>
  123.     <li>电脑列表89</li>
  124.     <li>电脑列表90</li>
  125.     <li>电脑列表91</li>
  126.     <li>电脑列表92</li>
  127.     <li>电脑列表93</li>
  128.     <li>电脑列表94</li>
  129.     <li>电脑列表95</li>
  130.     <li>电脑列表96</li>
  131.     <li>电脑列表97</li>
  132.     <li>电脑列表98</li>
  133.     <li>电脑列表99</li>
  134.     <li>电脑列表100</li>
  135.   </ul>
  137. </body>
  139. </html>

渲染效果

在这里插入图片描述

滑下去

在这里插入图片描述

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .box {
  12.       width: 500px;
  13.       height: 500px;
  14.       margin: 100px auto 0;
  15.       overflow: scroll;
  16.       background-color: #ccc;
  17.     }
  19.     .nav {
  21.       background-color: #f00;
  22.       color: #fff;
  23.       position: sticky;
  24.       top: 0;
  25.     }
  26.   </style>
  27. </head>
  29. <body>
  31.   <div class="box">
  32.     <h1>我是标题</h1>
  33.     <div class="nav">
  34.       <span>电脑</span>
  35.       <span>手机</span>
  36.       <span>衣服</span>
  37.       <span>鞋子</span>
  38.     </div>
  39.     <ul>
  40.       <li>电脑列表1</li>
  41.       <li>电脑列表2</li>
  42.       <li>电脑列表3</li>
  43.       <li>电脑列表4</li>
  44.       <li>电脑列表5</li>
  45.       <li>电脑列表6</li>
  46.       <li>电脑列表7</li>
  47.       <li>电脑列表8</li>
  48.       <li>电脑列表9</li>
  49.       <li>电脑列表10</li>
  50.       <li>电脑列表11</li>
  51.       <li>电脑列表12</li>
  52.       <li>电脑列表13</li>
  53.       <li>电脑列表14</li>
  54.       <li>电脑列表15</li>
  55.       <li>电脑列表16</li>
  56.       <li>电脑列表17</li>
  57.       <li>电脑列表18</li>
  58.       <li>电脑列表19</li>
  59.       <li>电脑列表20</li>
  60.       <li>电脑列表21</li>
  61.       <li>电脑列表22</li>
  62.       <li>电脑列表23</li>
  63.       <li>电脑列表24</li>
  64.       <li>电脑列表25</li>
  65.       <li>电脑列表26</li>
  66.       <li>电脑列表27</li>
  67.       <li>电脑列表28</li>
  68.       <li>电脑列表29</li>
  69.       <li>电脑列表30</li>
  70.       <li>电脑列表31</li>
  71.       <li>电脑列表32</li>
  72.       <li>电脑列表33</li>
  73.       <li>电脑列表34</li>
  74.       <li>电脑列表35</li>
  75.       <li>电脑列表36</li>
  76.       <li>电脑列表37</li>
  77.       <li>电脑列表38</li>
  78.       <li>电脑列表39</li>
  79.       <li>电脑列表40</li>
  80.       <li>电脑列表41</li>
  81.       <li>电脑列表42</li>
  82.       <li>电脑列表43</li>
  83.       <li>电脑列表44</li>
  84.       <li>电脑列表45</li>
  85.       <li>电脑列表46</li>
  86.       <li>电脑列表47</li>
  87.       <li>电脑列表48</li>
  88.       <li>电脑列表49</li>
  89.       <li>电脑列表50</li>
  90.       <li>电脑列表51</li>
  91.       <li>电脑列表52</li>
  92.       <li>电脑列表53</li>
  93.       <li>电脑列表54</li>
  94.       <li>电脑列表55</li>
  95.       <li>电脑列表56</li>
  96.       <li>电脑列表57</li>
  97.       <li>电脑列表58</li>
  98.       <li>电脑列表59</li>
  99.       <li>电脑列表60</li>
  100.       <li>电脑列表61</li>
  101.       <li>电脑列表62</li>
  102.       <li>电脑列表63</li>
  103.       <li>电脑列表64</li>
  104.       <li>电脑列表65</li>
  105.       <li>电脑列表66</li>
  106.       <li>电脑列表67</li>
  107.       <li>电脑列表68</li>
  108.       <li>电脑列表69</li>
  109.       <li>电脑列表70</li>
  110.       <li>电脑列表71</li>
  111.       <li>电脑列表72</li>
  112.       <li>电脑列表73</li>
  113.       <li>电脑列表74</li>
  114.       <li>电脑列表75</li>
  115.       <li>电脑列表76</li>
  116.       <li>电脑列表77</li>
  117.       <li>电脑列表78</li>
  118.       <li>电脑列表79</li>
  119.       <li>电脑列表80</li>
  120.       <li>电脑列表81</li>
  121.       <li>电脑列表82</li>
  122.       <li>电脑列表83</li>
  123.       <li>电脑列表84</li>
  124.       <li>电脑列表85</li>
  125.       <li>电脑列表86</li>
  126.       <li>电脑列表87</li>
  127.       <li>电脑列表88</li>
  128.       <li>电脑列表89</li>
  129.       <li>电脑列表90</li>
  130.       <li>电脑列表91</li>
  131.       <li>电脑列表92</li>
  132.       <li>电脑列表93</li>
  133.       <li>电脑列表94</li>
  134.       <li>电脑列表95</li>
  135.       <li>电脑列表96</li>
  136.       <li>电脑列表97</li>
  137.       <li>电脑列表98</li>
  138.       <li>电脑列表99</li>
  139.       <li>电脑列表100</li>
  140.     </ul>
  141.   </div>
  143. </body>
  145. </html>

渲染效果

在这里插入图片描述

15.12.3 position值对比

在这里插入图片描述

15.13 布局-定位元素的z-index设置
15.13.1 CSS属性 - z-index

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

    • 取值可以是正整数、负整数、0

  • 比较原则

    • 如果是兄弟关系

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

    • 如果不是兄弟关系

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

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .item {
  12.       position: fixed;
  13.       width: 100px;
  14.       height: 100px;
  15.       left: 0;
  16.       top: 0;
  17.       background-color: #f00;
  18.     }
  20.     .box2 {
  22.       left: 20px;
  23.       top: 20px;
  24.       background-color: #0f0;
  25.       z-index: -1;
  26.     }
  28.     .box3 {
  30.       left: 40px;
  31.       top: 40px;
  32.       background-color: #00f;
  33.     }
  34.   </style>
  35. </head>
  37. <body>
  39.   <div class="item box1">1</div>
  40.   <div class="container">
  41.     <div class="item box2">2</div>
  42.   </div>
  43.   <div class="item box3">3</div>
  45. </body>
  47. </html>

渲染效果

在这里插入图片描述

如果是兄弟比较

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .item {
  12.       position: fixed;
  13.       width: 100px;
  14.       height: 100px;
  15.       left: 0;
  16.       top: 0;
  17.       background-color: #f00;
  18.     }
  20.     .box2 {
  22.       left: 20px;
  23.       top: 20px;
  24.       background-color: #0f0;
  25.       z-index: -1;
  26.     }
  28.     .box3 {
  30.       left: 40px;
  31.       top: 40px;
  32.       background-color: #00f;
  33.     }
  35.     .info {
  37.       position: absolute;
  38.       z-index: 999;
  39.     }
  40.   </style>
  41. </head>
  43. <body>
  45.   <div class="item box1">1</div>
  46.   <div class="container">
  47.     <div class="item box2">
  48.       <div class="info">哈哈哈</div>
  49.       <div>呵呵呵</div>
  50.     </div>
  51.   </div>
  52.   <div class="item box3">3</div>
  54. </body>
  56. </html>

渲染效果

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读