移动互联实训DAY09

阴险的耕耘机

于 2024-07-21 00:04:05 发布

阅读量437

点赞数 20

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_61913550/article/details/140579640

版权

静态定位
是所有元素的默认定位⽅式。意味着将⼀个元素定位在默认⽂档流中。position: static;

相对定位

相对定位就是相对于⾃⼰以前在标准流中的位置来移动。position: relative; 使⽤top,right,bottom,left来控制

<!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>
        .div1{
            width: 200px;
            height: 200px;
            background-color: aliceblue;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: rgb(164, 193, 219);
            /* 相对定位 */
            position: relative;
            /* 使⽤top,right,bottom,left来控制 */
            right: 20px;
        }
        .div3{
            width: 200px;
            height: 200px;
            background-color: rgb(76, 152, 117);
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

绝对定位

绝对定位就是相对于body来定位。position: 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>
        .div1{
            width: 200px;
            height: 200px;
            background-color: aliceblue;
        }
        .div2{
            width: 300px;
            height: 300px;
            background-color: rgb(164, 193, 219);
            border: 1px solid;
            position: relative;
        }
        .div2 .son{
            width: 100px;
            height: 100px;
            background-color: rgb(193, 108, 108);
            /* 绝对定位 */
            position: absolute;
            /* 水平方向居中 */
            left: 50%;
            margin-left: -50px;
            /* 垂直方向居中 */
            top: 50%;
            margin-top: -50px;
            
        }

        .div3{
            width: 200px;
            height: 200px;
            background-color: rgb(76, 152, 117);
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2">
        <div class="son"></div>
    </div>
    <div class="div3"></div>
</body>
</html>

固定定位

固定定位可以让某个盒⼦不随着滚动条的滚动⽽滚动，固定定位的元素是脱离标准流的, 不会占⽤标准流中的空间。position: 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>
        .toTop{
            text-align: center;
            width: 100px;
            line-height: 50px;
            border: 1px solid;
            /* 固定定位 */
            position: fixed;
            bottom: 40px;
            right: 40px;
        }
    </style>
</head>
<body>
    <div>我是第1个div</div>
    <div>我是第2个div</div>
    <div>我是第3个div</div>
    <div>我是第4个div</div>
    <div>我是第5个div</div>
    <div>我是第6个div</div>
    <div>我是第7个div</div>
    <div>我是第8个div</div>
    <div>我是第9个div</div>
    <div>我是第10个div</div>
    <div>我是第11个div</div>
    <div>我是第12个div</div>
    <div>我是第13个div</div>
    <div>我是第14个div</div>
    <div>我是第15个div</div>
    <div>我是第16个div</div>
    <div>我是第17个div</div>
    <div>我是第18个div</div>
    <div>我是第19个div</div>
    <div>我是第20个div</div>
    <div>我是第21个div</div>
    <div>我是第22个div</div>
    <div>我是第23个div</div>
    <div>我是第24个div</div>
    <div>我是第25个div</div>
    <div>我是第26个div</div>
    <div>我是第27个div</div>
    <div>我是第28个div</div>
    <div>我是第29个div</div>
    <div>我是第30个div</div>
    <div>我是第31个div</div>
    <div>我是第32个div</div>
    <div>我是第33个div</div>
    <div>我是第34个div</div>
    <div>我是第35个div</div>
    <div>我是第36个div</div>
    <div>我是第37个div</div>
    <div>我是第38个div</div>
    <div>我是第39个div</div>
    <div>我是第40个div</div>
    <div>我是第41个div</div>
    <div>我是第42个div</div>
    <div>我是第43个div</div>

 

    <div class="toTop">
        <a href="#">回到顶部</a>
    </div>
</body>
</html>

粘滞定位

结合了 position:relative 和 position:fixed 两种定位功能于⼀体的特殊定位，适⽤于⼀些特殊场景。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。position: sticky;

<!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: 4000px;
            /* background-color: #9aca84; */
            margin: 0 auto;
        }
        /* 对所有的div子元素设置样式 */
        .container div{
            height: 500px;
            width: 100%;
        }
        /* 隔行变色 */
        .container div:nth-child(odd){
            background-color: #b0d799;
        }
        .container div:nth-child(even){
            background-color: #9e7fd0;
        }
        /* 左侧侧边栏 */
        .container .left{
            width: 100px;
            height: 400px;
            background-color: #d17070;
            float: left;
            margin-left: -150px;
            /* 粘滞定位 */
            position: sticky;
            top: 60px;
        }
        /* 右侧侧边栏 */
        .container .right{
            width: 100px;
            height: 400px;
            background-color: #d17070;
            float: right;
            margin-right: -150px;
            /* 粘滞定位 */
            position: sticky;
            top: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
        <!-- 左边侧边栏 -->
        <aside class="left"></aside>
        <!-- 右边侧边栏 -->
        <aside class="right"></aside>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

z-index

默认情况下所有的元素都有⼀个默认的z-index属性, 取值是0. z-index属性的作⽤是专⻔⽤于控制定位流元素的覆盖关系的。

<!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>
    .div1,.div3{
      width: 300px;
      height: 300px;
      border: 1px solid;
      /* 相对定位 */
      position: relative;
    }
    .div3{
      z-index: 200;
    }
    .div2{
      width: 150px;
      height: 150px;
      background-color: red;
      /* 绝对定位 */
      position: absolute;
      top: 300px;
      left: 300px;
      z-index: 100;
    }
    .div4{
      width: 150px;
      height: 150px;
      background-color: blue;
      position: absolute;
      left: 250px;
    }
  </style>
</head>
<body>
  <div class="div1">
    <div class="div2"></div>
  </div>
  <div class="div3">
    <div class="div4"></div>
  </div>
</body>
</html>

阴险的耕耘机

关注

20
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
移动互联实训DAY09

结合了 position:relative 和 position:fixed 两种定位功能于⼀体的特殊定位，适⽤于⼀些特殊场景。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。相对定位就是相对于⾃⼰以前在标准流中的位置来移动。固定定位可以让某个盒⼦不随着滚动条的滚动⽽滚动，固定定位的元素是脱离标准流的, 不会占⽤标准流中的空间。默认情况下所有的元素都有⼀个默认的z-index属性, 取值是0. z-index属性的作⽤是专⻔⽤于控制定位流元素的覆盖关系的。绝对定位就是相对于body来定位。
复制链接

扫一扫