pink前端学习--定位

最新推荐文章于 2024-10-07 20:56:37 发布

白柳的信徒

最新推荐文章于 2024-10-07 20:56:37 发布

阅读量197

点赞数 7

文章标签：前端学习

本文链接：https://blog.csdn.net/m0_64882756/article/details/137202337

版权

本文介绍了CSS中的浮动、相对定位、绝对定位和固定定位的概念及用法，通过实例展示了如何控制盒子的布局和层次。

摘要由CSDN通过智能技术生成

1.为什么要定位？

1、浮动让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子

2、某个元素可以自由的在盒子内移动，并且压住其他的盒子

2. 定位组成定位=定位模式+ 边移量

1.将盒子固定在某一个位置。定位也是摆放盒子，按照定位方式移动盒子

2. 定位边偏移只有top.bottom,left,right;

3. 静态定位 position：static;(默认定位，无定位与标准流属性相同)

4.相对定位 position:relative; 相对于自己原来的位置，保留原来的位置；

要让它改变位置需要添加偏移量才会移动位置，

并且在移动之前的位置继续占有，不会被其余的盒子占有，

后面的盒子仍然以标准流的盒子对待他

4.1 代码

<!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 {
        position: relative;
        height: 100px;
        width: 100px;
        top: 50px;
        left: 50px;
        background-color: pink;
      }
      .box1 {
        height: 100px;
        width: 100px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box1"></div>
  </body>
</html>

5 绝对定位 position: absolute;（重要子绝父相）

子级使用绝对定位不会占有原来的位置，父级要使用相对定位从而来限制子盒子

它是相对于祖先元素来说的

1、无祖父元素，以浏览器来定位

2.有父盒子以父盒子定位

3.不再占有原先位置

4，绝对定位居中不能使用 margin: auto;来实现。使用left：50%；再加上left：-自生宽度一半。

5. 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>
      .box {
        position: relative;
        height: 200px;
        width: 200px;
        background-color: pink;
      }
      .box1 {
        position: absolute;
        margin-top: 50px;
        margin-left: -50px;
        left: 50%;
        height: 100px;
        width: 100px;
        background-color: palegoldenrod;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
    </div>
  </body>
</html>