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

最新推荐文章于 2024-05-28 12:36:33 发布

Winnie_9727

最新推荐文章于 2024-05-28 12:36:33 发布

阅读量720

点赞数 1

文章标签： css

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

版权

相对定位：relative

特点：

1、相对定位，需要配合方位属性才能移动

2、相对于谁移动的

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

3、相对定位的元素在标准流占不占位置？

占位置-》没有脱标！！！

应用的场景：

1、配合绝对定位组cp（子绝父相）！！！

2、也可以用在小范围的移动中

 * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 300px;
      height: 300px;
    }
    .red {
      background-color: red;
    }
    .green {
      background-color: green;
     
      position: relative;
      left: 100px;
      top: 100px;
    }
    .blue {
      background-color: blue;
    }

绝对定位：absolute

特点：

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

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

绝对定位相对于浏览器的边框进行移动的！（特殊情况！！！）

3、绝对定位占不占位置？

不占位置-》脱标了！

应用场景：

子绝父相！

 * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 300px;
      height: 300px;
    }
    .red {
      background-color: red;
    }
    .green {
      background-color: green;
      
      position: absolute;
      top: 100px;
      left: 100px;
    }
    .blue {
      background-color: blue;
    }

绝对定位到底相对于谁进行移动

1、绝对定位默认是相对于浏览器的边框进行移动的！

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

如何判断绝对定位相对于谁进行移动呢？？

1、有没有父元素

1、没有父元素-》默认相对于浏览器进行移动！

2、有父元素

1、没有定位-》相对于浏览器进行移动

2、有定位（相对、绝对、固定）-》相对于有定位的父元素进行移动！

* {
      margin: 0;
      padding: 0;
    }
    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin-left: 400px;
      margin-top: 400px;
      position: fixed;
    }
    .son {
      width: 300px;
      height: 300px;
      background-color: blue;
      position: absolute;
      top: 100px;
      left: 100px;
}

子绝父相：让子元素相对于父元素进行移动！

子元素-》绝对定位

父元素-》相对定位

也会用到子绝父绝（很少会用到）

如果在用子绝父相的时候，发现父元素已经有定位了，此时不需要改变父元素的定位也能实现效果！！

* {
    margin: 0;
    padding: 0;
  }

  .father {
    width: 400px;
    height: 400px;
    background-color: pink;
    margin-left: 400px;
    margin-top: 400px;
    position: relative;
  }
  .son {
    width: 300px;
    height: 300px;
    background-color: blue;
    /*1、子绝父相*/
    position: absolute;
    right: 0px;
    bottom: 0px;
}
.sun {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    right: 0px;
    bottom: 0px;
  }

子绝父相居中平移案例： (通过定位进行水平居中）

<left: 50%;> 表示的就是父元素宽度的一半

<transform: translateX(-50%);> 表示在x轴方向平移，表示的就是当前小盒子宽度的一半

.father {
      width: 600px;
      height: 400px;
      background-color: pink;
      position: relative;
    }
    .son {
      width: 200px;
      height: 100px;
      background-color: blue;
      position: absolute;
      top: 0px;
      /*left: 50%  表示的就是父元素宽度的一半！！！*/
      left: 50%;
      /*margin-left: -100px;*/
      /*margin-left: -50%  表示的也是父元素宽度的一半！！*/
      /*transform: translateX(-50%);
        表示在x轴方向平移，表示的就是当前小盒子宽度的一半
      */
      transform: translateX(-50%);

子绝父相水平垂直居中案例：（通过定位进行水平垂直居中）

left: 50%;（水平方向）

/*transform: translateX(-50%);*/

/*让子盒子往下走父盒子的一半*/

top: 50%;（垂直方向）

/*让子盒子往上走自己的一半*/

/*transform: translateY(-50%);*/

连写的形式：transform: translate(x轴方向，y轴方向);

transform: translate(-50%,-50%);

.father {
      width: 600px;
      height: 400px;
      background-color: pink;
      position: relative;
    }
    .son {
      width: 200px;
      height: 100px;
      background-color: blue;
      /*1、子绝父相*/
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }

网页头部Hot部分案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
 * {
      margin: 0;
      padding: 0;
    }
    
    .top {
      width: 760px;
      height: 150px;
      background: url(images/banner_bg.jpg);
    }
    ul {
      list-style: none;
      background: url(images/button1_bg.jpg);
      width: 760px;
    }
    ul li {
      float: left;
    }
    ul li a {
      width: 80px;
      height: 32px;
      background-color: pink;
      float: left;
      text-decoration: none;
      text-align: center;
      line-height: 32px;
      color: red;
      font-size: 12px;
      background: url(images/button1.jpg);
    }
    ul li a:hover {
      background: url(images/button2.jpg);
    }
   /*ul清楚浮动后，其宽度可以设置，不再由内容撑开，此时宽度等于top的宽度*/
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }
    
    /*因为是img标签与li标签层叠的现象，所以此时使用定位来做
      因为此时img标签在li标签中是水平居中的，所以就是定位实现居中的方法！
    */
    .hot {
      position: relative;
    }
    .hot img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -10px;
    }
  </style>
</head>
<body>
  <div class="top">
    <img src="images/banner1.jpg" alt="">
  </div>
  <ul class="clearfix">
    <li><a href="#">导航</a></li>
    <li><a href="#">导航</a></li>
    <li class="hot">
      <a href="#">导航</a>
      <img src="images/hot.png" alt="">
    </li>
    <li><a href="#">导航</a></li>
  </ul>
</body>
</html>

Winnie_9727

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css-相对定位、绝对定位、固定定位

相对定位：relative特点：1、相对定位，需要配合方位属性才能移动2、相对于谁移动的相对于自己原来的位置进行移动的！3、相对定位的元素在标准流占不占位置？占位置-》没有脱标！！！应用的场景：1、配合绝对定位组cp（子绝父相）！！！2、也可以用在小范围的移动中 * { margin: 0; padd...
复制链接

扫一扫