css-定位

qq_38535965

已于 2023-09-12 08:43:30 修改

阅读量83

点赞数

文章标签： css html 前端

于 2023-09-08 09:07:48 首次发布

本文链接：https://blog.csdn.net/qq_38535965/article/details/132751921

版权

本文探讨了CSS定位类型（如relative、absolute、fixed、sticky）的使用场景、z-index的重要性以及定位元素对布局的影响，包括块元素的居中技巧、margin与浮动元素的区别，以及定位元素如何影响文本渲染。

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

定位类型

类型	相对点	是否托标	使用场景
relative	自身	不托标，保留原来的位置	给绝对定位的子元素当参照点
absolute	最近的带有除默认定位的上级元素	脱标，增加行内块元素特性	想设置在父盒子任意位置时
fixed	浏览器可视区域	托标，增加行内块元素特性	固定在浏览器窗口，不随着滚动消失
sticky	浏览器可视区域	一开始不托镖，当元素偏移距离达标时变成固定文定位。	一开始相对定位，后面固定定位

z-index

添加定位的元素可能发生覆盖，当没有设置z-index时同级元素后来者居上。

当指定z-index后谁的值大谁在上

定位拓展

块元素水平/垂直居中

设置定位后的元素marigin o atuo 无法实现水平居中了。

  <style>
    .box {
      /* margin: auto; */
      position: absolute;
      /* 距离页面50%距离-自宽/高的一半 （因为元素通过左上角移动而不是中心点）*/
      left: calc(50% - 100px);
      top: calc(50% - 100px);
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>