Position定位

小小橘柚

已于 2023-10-28 12:27:01 修改

阅读量137

点赞数 4

分类专栏： HTML+CSS 文章标签： css html

于 2023-10-05 18:18:07 首次发布

本文链接：https://blog.csdn.net/m0_60726620/article/details/133582637

版权

原文连接：Position定位
内置更多技术文章
博主：橘柚

当讨论CSS中的定位时，我们通常指的是如何控制元素在页面上的位置和布局。CSS中的定位属性允许您精确地放置元素，并定义元素与其周围内容之间的关系。以下是关于CSS中常见的定位属性的详细讲解：

.static-element {
   
  /* 静态定位是默认的，无需额外的属性 */
}

相对定位允许您相对于元素在正常文档流中的位置进行微调，但元素仍然占据原来的空间。
要使用相对定位，您需要为元素设置position: relative;属性。然后，您可以使用top、right、bottom和left属性来指定元素相对于其原始位置的偏移量。

.relative-element {
   
  position: relative;
  top: 10px; /* 向下移动元素10像素 */
  left: 20px; /* 向右移动元素20像素 */
}

相对定位的应用：

绝对定位使元素脱离正常文档流，相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，元素将相对于文档的根元素（通常是<html>）进行定位。
使用top、right、bottom和left属性来确定元素在其定位容器中的位置。
元素没有设置宽度，绝对定位会根据自身内容调整宽度，可通过z-index来控制层叠的顺序。
绝对定位的参照父级定位并非只有relative，它参照所有已经定位的父级元素，即relative、fixed、sticky、absolute

.absolute-element {
   
  position: absolute;
  top: 50px;
  left: 100px;
}

绝对定位会继续向上寻找直至根元素。

不存在top和left默认为0的情况，他会待在原来的位置，绝对定位必须指定位置

.fixed-element {
   
  position: fixed;
  top: 10px;
  right: 10px;
}

关注

专栏目录