CSS的绝对定位absolute

最新推荐文章于 2025-05-18 10:42:35 发布

原创最新推荐文章于 2025-05-18 10:42:35 发布 · 478 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文通过实例解析了CSS中绝对定位的特性，特别是当元素的直接父级使用静态定位时，绝对定位元素如何寻找其定位参照物的过程。文章还展示了如何通过调整父级元素的定位属性来改变绝对定位元素的行为。

在W3School里面的CSS position属性中，我们可以看到absolute的定义如下：

这里写图片描述

看上去这个定义很简单，其实“相对于static定位以外的第一个父元素进行定位”这句话很多人都没有太在意，以致于遇到一些很莫名其妙的问题也不知所措，以下就详细地通过例子来解读一下这句话的涵义。

HTML代码：

<div class="firstDiv">
  <div class="secondDiv">
    <div class="thirdDiv">
    </div>
  </div>
</div>

CSS代码：

.firstDiv
{
  width: 90px;
  height: 90px;
  border: solid;
  position: relative;
}

.secondDiv
{
  width: 45px;
  height: 45px;
  border: solid red;
}

.thirdDiv
{
  width: 100%;
  height: 100%;
  border: solid yellow;
  position: absolute;
}

效果图：
这里写图片描述

你有没有觉得奇怪：第三个div的宽度和高度都设置了100%，应该继承第二个div的宽度和高度才对，怎么这里好像继承的却是第一个div的宽度和高度呢？那是因为第三个div的position是绝对定位，它的第一个父元素也就是第二个div没有定位，没有定位也就意味着用的默认定位“static”，而absolute元素的定位是相对于static定位以外的第一个父元素，所以第一个父元素不能要，而第二个父元素也就是第一个div，它有设置position为relative, 所以第三个div的宽度和高度是继承自第一个div，而不是第二个。

那如果我们给第二个div加上position为relative或者absolute效果会怎么样呢？

.secondDiv
{
  width: 45px;
  height: 45px;
  border: solid red;
  position: absolute; //Or postion: relative;
}

请看效果图：
这里写图片描述

我们可以看到这时候第三个div就继承自第二个div的宽度和高度了。

自己动手试试吧: Absolute Example on JSFiddle.