定位的学习

已于 2023-12-03 19:11:30 修改
阅读量92 收藏
点赞数
分类专栏： # HTML+CSS 文章标签： 学习
于 2023-12-03 13:54:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50956380/article/details/134764257
版权

定位

文章目录

HTML+CSS目录总览

标准流 (Normal Flow)

定义

normal flow 一般可以被称为标准流、常规流、正常流、文档流 (document flow)

默认情况下，元素都是按照 normal flow 进行定位：

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

image-20231201203052061

margin-padding位置调整

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

  • 比较明显的缺点是

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

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

    • 我们可以通过position属性来进行设置;

例子： 定位的初次使用

  • position: relative: 使得span和.box为定位元素，此时脱离标准流，通过left，right等可以进行改变位置，相对于原来的位置
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span,.box{
      display: inline-block;
      /* 使得span和.box为定位元素，此时脱离标准流，通过left，right等可以进行改变位置，相对于原来的位置 */
      position: relative; 
      left: 50px;
      top: 0px;
      bottom: 0px;
      right: 30px;
      
    }
  </style>
</head>
<body>
  <div>元素</div>
  <span>span元素</span>
  <img src="/images/gouwujie01.jpg" alt="">
  <div class="box">我是div</div>
  
</body>
</html>

效果：

image-20231202085759934

认识元素的定位

定义

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

image-20231202085915052

通过Position属性对定位元素进行设置

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

  • static ： 静态定位

  • relative ： 相对定位

  • absolute ： 绝对定位

  • sticky ： 粘性定位

  • fixed ： 固定定位

  • 默认值： static 静态定位

    • 元素按照normal flow布局（块级占用视图的行，行级占用内容大小）
    • left 、right、top、bottom没有任何作用

**对比： **

image-20231202090336361

相对定位(relative)

定义

  • 元素按照 normal flow 布局

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

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

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

image-20231202090839315

  • 相对定位的应用场景
    • 在不影响其他元素位置的前提下，对当前元素位置进行微调

例子：relative 的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text{
      position: relative;
      left: -30px;
      top: -50px;
    }
  </style>
</head>
<body>
  <span>我是span元素</span>
  <strong class="text">我是strong元素</strong>
  <img src="../images/kobe01.jpg" alt="">
  <div>我是div元素</div>
</body>
</html>

效果：

image-20231202091029671

例子： 数学公式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      font-size: 20px;
      font-weight: 700;
    }
    span{
      position: relative;
      bottom: 9px;
      font-size: 11px;
      font-weight: 400;
    }
  </style>
</head>
<body>
  <div>
    3<span>2</span> + 2<span>3</span> = 17
  </div>
</body>
</html>

效果：

image-20231202091340756

练习：梦幻西游设置背景图片

  • 设置背景图片，居中，并且浏览器窗口缩小时，背景图片依然居中
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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;
      background: url("../images/mhxy.jpg") center;
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
  
</body>
</html>

image-20231202094614421

练习：使用relative 设置背景图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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;
      transform: translate(-50%); /* 自动获取父元素的宽度，自己右移50% */
      margin-left: 50%;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="../images/mhxy.jpg" alt="">
  </div>
</body>
</html>

image-20231202094623387

固定定位（fixed）

定义

  • 元素脱离normal flow（脱离标准流、脱标）

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

  • 定位参照对象是视口（viewport）

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

画布 和 视口

image-20231202094204416

练习：fixed固定定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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>
  
</body>
</html>

效果：

image-20231202095143403

练习：右下角固定

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

效果：

image-20231202095328391

绝对定位（absolute)

定义

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

练习：absolute

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      width: 1000px;
      height: 800px;
      background-color: #f00;

      position: relative;
      top: 0;
    }
    .box{
      position: relative;
      
      width: 600px;
      height: 400px;
      background-color: #0f0;
    }
    strong{
      position: absolute; 
      right: 0;
      top: 0;
    }
    img{
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div>第一个div元素</div>
  <div class="container">
    <div class="box">
      <span>我是span元素</span>
      <strong>我是strong元素</strong>
      <img src="../images/gouwujie01.jpg" alt="">
      <div>我是div元素</div>
    </div>
  </div>
  <div>最后一个div</div>
</body>
</html>

效果：

image-20231202100549034

练习： 设置.box 的postition=absolute

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      width: 1000px;
      height: 800px;
      background-color: #f00;

      position: relative;
      top: 0;
    }
    .box{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 600px;
      height: 400px;
      background-color: #0f0;
    }
    
    strong{
      position: absolute; 
      right: 0;
      top: 0;
    }
    img{
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div>第一个div元素</div>
  <div class="container">
    <div class="box">
      <span>我是span元素</span>
      <strong>我是strong元素</strong>
      <img src="../images/gouwujie01.jpg" alt="">
      <div>我是div元素</div>
    </div>
  </div>
  <div>最后一个div</div>
</body>
</html>

效果：

image-20231202100901231

练习：绝对定位元素的特点一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      width: 800px;
      height: 800px;
      background-color: #f00;
      position: relative;
    }
    .box{
      width: 500px;
      height: 500px;
      background-color: #0f0;
      
      position: absolute;
      right: 0;
      bottom: 0;
    }
    
    strong{
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #00f;
      color: white;
      width: 200px;
      height: 60px;
    }
    img{
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <span>我是span元素</span>
      <strong>我是strong元素</strong>
      <img src="../images/gouwujie01.jpg" alt="">
      <div>我是div元素</div>
    </div>
  </div>
</body>
</html>

效果：

image-20231202101606137

定位元素的特点

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

练习：块级元素div特性消失

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{

      background-color: #f00;
      position: absolute;
      
    }
    strong{
      width: 200px;
      height: 200px;
      background-color: #0f0;
    }
  </style>
</head>
<body>
  <div class="box">
    <strong>
      <span>我是span元素</span>
      <i>我是i元素</i>
    </strong>
  </div>
  
</body>
</html>

效果：

image-20231202102959938

练习： strong元素可以设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{

      background-color: #f00;
      
    }
    strong{
      position: absolute;

      width: 200px;
      height: 200px;
      background-color: #0f0;
    }
  </style>
</head>
<body>
  <div class="box">
    <strong>
      <span>我是span元素</span>
      <i>我是i元素</i>
    </strong>
  </div>
  
</body>
</html>

效果：

image-20231202103300373

练习：实现居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 800px;
      height: 800px;
      background-color: #f00;
      position: relative;
    }
    .container{
      
      background-color: #0f0;
      
      width: 200px;
      height: 100px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
   
  </style>
</head>
<body>
  <div class="box">
    <div class="container"></div>
  </div>
  
</body>
</html>

效果：

image-20231202103702165

网易云小案例

效果：

image-20231203094756742

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      color: #333;
      text-decoration: none;

    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      -webkit-text-size-adjust: none;
    }

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

    .sprite_02{
      background-image: url(../images/music_sprite_1.png);
      display: inline-block;
    }
    
    .item {
      width: 140px;
      height: 140px;
      margin: 0 auto;
    }

    .top {
      background-color: red;
      position: relative;
    }

    .item .top img {
      /* 将图片下面多出来的的区域去掉 */
      vertical-align: top;
      /* display: block; */

    }

    .item .top .cover {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      /* width: 140px; 不这样设置，因为如果后面封面大小发生改变，还需要重新设置
      height: 140px; */
      background-image: url(../images/music_sprite.png);
      background-position: 0 0;
    }

    .item .top .info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 27px;
      padding-left: 10px;

      font-size: 12px;
      color: #ccc;
      line-height: 27px;

      background-image: url(../images/music_sprite.png);
      background-position: 0 -537px;
    }

    .item .top .info .icon-music {
      display: inline-block;
      width: 14px;
      height: 11px;
      background-image: url(../images/music_sprite_1.png);
      background-position: 0 -24px;

      position: relative;
      top: 1px;
    }

    .item .top .info .count {
      margin-left: 4px;
    }

    .item .top .info .icon-play{
      display: inline-block;
      width: 16px;
      height: 17px;;
      
      background-image: url(../images/music_sprite_1.png);
      background-position: 0 0;

      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      right: 10px;
    }

    .item .bottom {
      display: block;
      font-size: 14px;
    }
    .item .bottom:hover{
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div class="item">
    <div class="top">
      <img src="../images/music_album02.jpg" alt="音乐封面">
      <!-- <div class="cover"></div> -->
      <a class="cover" href="#"></a>
      <div class="info">
        <i class="icon-music"></i>
        <span class="count">62万</span>
        <i class="icon-play"></i>

      </div>
    </div>
    <a class="bottom" href="#">
      日系/无前奏：开口即跪 一秒沦陷
    </a>
  </div>

</body>

</html>

粘性定位（sticky）

定义

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

    • 可以看做是相对定位和固定定位的结合体;

    • 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点

    • 当达到这个阈值点时, 就会变成固定定位;

    • sticky是相对于最近的滚动祖先包含视口的(the nearest ancestor scroll container’s scrollport )

      position: sticky;
      /* top: 0; 必须告诉停留的距离 */
      top: 0;

练习：固定top

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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; 必须告诉停留的距离 */
      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>

image-20231203101425936

练习：sticky最近的滚动祖先包含视口

效果：

image-20231203102428044

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 500px;
      height: 500px;

      background-color: #ccc;
      margin: 50px auto 0;
      overflow: scroll;
    }
    .nav{
      background-color: #f00;
      color: #fff;

      /* 
      position: relative;
      top: 0;
      left: 0;
      right: 0;  
      */
      

      position: sticky;
      /* top: 0; 必须告诉停留的距离 */
      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>

定位元素的属性

定义

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

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

  • 比较原则

    • 如果是兄弟关系
      • z-index越大，层叠在越上面
      • z-index相等，写在后面的那个元素层叠在上面
    • 如果不是兄弟关系
    • 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
    • 而且这2个定位元素必须有设置z-index的具体数值

image-20231203120914252

练习：兄弟关系

效果：

image-20231203120404158

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      position: fixed;
      width: 100px;
      height: 100px;
      left: 0;
      top: 0;
      background-color: #f00;
      color: #fff;
    }

    .box2 {
      left: 20px;
      top: 20px;
      background-color: #0f0;
      z-index: 100;

    }

    .box3 {
      left: 40px;
      top: 40px;
      background-color: #00f;

    }
  </style>
</head>

<body>
  <div class="item box1">1</div>
  <div class="container">
    <div class="item box2">2</div>
  </div>
  <div class="item box3">3</div>

</body>

</html>

练习：不是兄弟关系

效果：

image-20231203120844282

代码：info和box不是兄弟关系

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      position: fixed;
      width: 100px;
      height: 100px;
      left: 0;
      top: 0;
      background-color: #f00;
      color: #fff;
    }

    .box2 {
      left: 20px;
      top: 20px;
      background-color: #0f0;
      z-index: -1;

    }

    .box3 {
      left: 40px;
      top: 40px;
      background-color: #00f;

    }

    .info {
      position: absolute;
      z-index: 999;
    }
  </style>
</head>

<body>
  <div class="item box1">1</div>
  <div class="item box2">
    <dir class="info">哈哈哈</dir>
    <div>呵呵呵</div>
  </div>

  </div>
  <div class="item box3">3</div>

</body>

</html>
柒林
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值