css-相对定位、绝对定位、固定定位

最新推荐文章于 2024-08-11 10:27:53 发布

Winnie_9727

最新推荐文章于 2024-08-11 10:27:53 发布

阅读量521

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_59950604/article/details/122347598

版权

半透明效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      width: 1226px;
      height: 600px;
      background: url(images/bg.jpg);
      margin: 0 auto;
      position: relative;
    }
    .mi {
      width: 100%;
      height: 100px;
      background-color: rgba(250, 10, 10, 0.616);
      /*1、子绝父相*/
      position: absolute;
      bottom: 0px;
      left: 0px;

      /*
        绝对定位-》不占位置-》脱标了！！！！（宽度变成默认由内容撑开，不在继承父元素的宽度了！！！）
      */
      color: rgb(23, 134, 23);
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="mi">
      呵呵呵
    </div>
  </div>
</body>
</html>

固定定位：fixed

特点：

1、需要配合方位属性一起使用的！！！

2、相对于谁进行移动的？？？

固定定位永远相对于浏览器进行移动的！！！

3、占不占位置？？？

不占位置-》脱标了！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      /*固定定位：fixed
        
        特点：
          1、需要配合方位属性一起使用的！！！
          2、相对于谁进行移动的？？？
              固定定位永远相对于浏览器进行移动的！！！
          3、占不占位置？？？
            不占位置-》脱标了！！
      */
      position: fixed;
      right: 0px;
      bottom: 0px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

总结：

1、静态定位（static）

标准流中的元素默认都是静态定位-》有争议性

2、相对定位（relative）

特点：

1、相对于自己原来的位置进行移动的！！！

2、占位置-》没有脱标

3、绝对定位（absolute）

特点：

1、默认相对于浏览器进行移动

如果父元素有定位（相对定位、绝对定位、固定定位），相对于有定位的父元素进行移动！！！！

2、不占位置-》脱标了

4、固定定位（fixed）

特点：

1、永远相对于浏览器进行移动

2、不占位置-》脱标了！！！

子绝父相：

子元素-》绝对定位

父元素-》相对定位

通过定位水平居中

1、left：50%；

2、transform：translateX（-50%）；

标准流、浮动、定位之间的层级关系

标准流<浮动<定位！！！

判断定位之间的层级关系

定位之间的层级关系默认是相同的，谁在html写在下面，谁就显示在最上面！！！！

z-index：手动设置定位元素的层级关系！！

取值：整数

取值如果越大，层级也越高！！！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 300px;
      height: 300px;
    }
    .red {
      background-color: red;
      /*相对定位*/
      position: relative;
      top: 0px;
      left: 0px;

      z-index: 3;
    }
    .green {
      background-color: green;
      /*float: left;*/
      /*
      浮动之后的元素-》飘起来了-》不占位置-》高出半个级别
      */

      /*绝对定位*/
      position: absolute;
      top: 100px;
      left: 100px;

      z-index: 2;
    }
    .blue {
      background-color: blue;

      /*固定定位*/
      position: fixed;
      top: 200px;
      left: 200px;

      z-index: 1;
    }
  
  </style>
</head>
<body>
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</body>
</html>

垂直对齐方式：vertical-align

取值：

1、baseline：基线对齐（默认值）图片的底部与文字的基线对齐

2、bottom：底部对齐

3、middle：中线对齐

4、top：顶部对齐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    img {
      vertical-align: bottom;
    }
  </style>
</head>
<body>
  <img src="1.jpg" alt="">棠哥ayfc棠哥ayfc棠哥ayfc棠哥ayfc
</body>
</html>

场景一：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input {
      vertical-align: middle;
      height: 50px;
      /*自动内减*/
      box-sizing:border-box;
    }
  </style>
</head>
<body>
  <input type="text"><input type="button" value="普通按钮">
</body>
</html>

场景二：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    img {
      vertical-align: bottom;
    }
  </style>
</head>
<body>
  <img src="1.jpg" alt=""><input type="text">
</body>
</html>

场景三：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    input {
      vertical-align: top;
    }
  </style>
</head>
<body>
  <div>
    <input type="text">
  </div>
</body>
</html>

场景四：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      background-color: pink;
    }
    img {
      vertical-align: bottom;
    }
  </style>
</head>
<body>
  <div>
    <img src="1.jpg" alt="">y
  </div>
</body>
</html>