13-CSS定位

已注销
49 阅读3分钟

01 标准流布局概念的理解

00001.png

02 position属性

00002.png

03 相对定位

依然在标准流中

应用场景: 在不影响其它元素的情况下,对当前元素进行微调

<!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: relative;
        left: 30px;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <span>span元素</span>
    <strong class="text">strong元素</strong>
    <img src="../images/gouwujie01.jpg" alt="">
    <div>div元素</div>
  </body>
</html>

00003.png

3.1 案例1

00004.png

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

3.2 案例2

梦幻西游使用背景的方法让图片的重要内容始终居中

<!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;
      overflow: hidden;
    }

    .box img {
      position: relative;
      /* 先把图片移到最左边 */
      left: -960px;
      /* 再把图片移动包含块的一半{marigin-left的百分比是相对于包含块的} */
      margin-left: 50%;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./imgs/mhxy.jpg" alt="">
  </div>
</body>
</html>

00005.png 但是这种方案图片向左移的距离写死了,如果图片的宽度发生了变化，还需要我们去手动修改这是不方便的

修改代码

<!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;
      overflow: hidden;
    }

    .box img {
      position: relative;
      /* 先移动图片的一半（translate是相对于自己）*/
      transform: translate(-50%);
      /* 再把图片移动包含块的一半{marigin-left的百分比是相对于包含块的} */
      margin-left: 50%;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./imgs/mhxy.jpg" alt="">
  </div>
</body>
</html>

04 固定定位

脱离标准流(相对于视口即可见区域)

使用固定定位前

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <span>span元素</span>
    <img src="./imgs/gouwujie01.jpg" alt="">
    <strong>strong元素</strong>
</body>
</html>

00006.png 使用固定定位后(相当于把原来的元素拿走了,自己再决定放在哪里[用left/right/top/bottom等属性来决定])

<!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>
    strong {
      position: fixed;
    }
  </style>
</head>
<body>
  <span>span元素</span>
    <img src="./imgs/gouwujie01.jpg" alt="">
    <strong>strong元素</strong>
</body>
</html>

00007.png

4.1 案例1

00008.png

<!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 {
      text-align: center;
      width: 80px;
      height: 40px;
      color: #fff;
      line-height: 40px;
      background-color: brown;
      border-radius: 8px;
      cursor: pointer;
    }

    .handle .item:hover {
      background-color: red;
    }

    .handle .top {
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div class="handle">
    <div class="item top">顶部</div>
    <div class="item bottom">底部</div>
  </div>
</body>
</html>

05 绝对定位

脱离标准流(参考的是最临近的定位祖先元素如果没有找到这样的祖先元素,参考的是视口)

5.1 基本使用

00009.png

<!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 .item1 {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: green;
    }

    .box .item1 > .item2 {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 200px;
      height: 200px;
      background-color: red;
    }

    .box .item1 > .item2 strong {
      position: absolute;
      left: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item1">
      <div class="item2">
        <strong>strong元素</strong>
      </div>
    </div>
  </div>
</body>
</html>

06 position为absolute或fixed的元素的特点

00010.png 代码案例

<!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 {
      background-color: red;
    }
    /* 可以看到box这个元素直接在页面消失了，所以当设置元素为absolute它就不会向父元素汇报自己的宽度和高度了 */
    .box .container {
      position: absolute;
    }    
  </style>
</head>
<body>
  <div class="box">
    <div class="container">div元素</div>
  </div>
</body>
</html>

07 绝对定位让元素水平居中

00011.png

<!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 {
      position: relative;
      width: 800px;
      height: 300px;
      background-color: red;
    }
    .container {
      position: absolute;
      width: 200px;
      height: 100px;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-color: green;
    }
  </style>
</head>
<body>
  <!-- 水平方向的公式: red box的宽度=绿色盒子的宽度+left+right+margin left + margin right -->
  <div class="box">
    <div class="container"></div>
  </div>
</body>
</html>

00012.png

08 绝对定位让元素垂直居中

00013.png

<!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 {
      position: relative;
      width: 800px;
      height: 300px;
      background-color: green;
    }
    .box {
      position: absolute;
      width: 200px;
      height: 100px;
      background-color: red;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

00014.png

09 粘性定位

00015.png 代码示例

00016.png

10 z-index

00017.png

avatar
文章
阅读
粉丝