相对于祖先元素，将元素定位在绝对定位的父元素内部

Question

我有一个子元素需要与祖先元素一起使用 absolute 定位。问题是父元素也被绝对定位了。

我不能使用 JavaScript。如何只用纯 CSS 实现这一点？

JSFiddle 示例

<div class="col-md-6 gp">
    <div class="col-md-4 p">
        <div class="col-md-2 c"> position me w.r.t to .gp</div>
    </div>
</div>

.gp { height : 200px; position: relative; }

.p {
    height : 100px; width: 250px;
    position :absolute;
    top : 50px; left: 50px;
}

.c { position: absolute; height: 50px; }

- StateLess

---

只需在内部absolute元素周围放置一个包装器div，并为其设置 position:relative 即可。 - Sebsemillia

请在问题上更具体一些，最好提供一个例子。 - Jason

@Paulie_D 可能的，我即将发布一个答案。 - Hashem Qolami

@aktiv-coder 看了你的fiddle，你在使用bootstrap。但是你使用它的方式不正确，你的标记无法工作。修复这个问题可能会解决你的问题。同时，提供一个你想要实现的示例会很有帮助。“position me w.r.t to .gp”对我来说并不是自解释的。 - Sebsemillia

请在您的问题中发布您的代码。如果 jsFiddle 不再存在，您的问题会立即变得毫无价值。 - j08691

Answer 1

如果不需要支持Internet Explorer 8及以下版本，我们可以通过纯CSS实现。以下是有关CSS Transforms的知识：

6 转换渲染模型

对于由CSS盒子模型控制布局的元素，除了none之外的任何值都会导致创建堆叠上下文和包含块。该对象充当固定定位后代的包含块。

因此，如果我们在祖先元素中添加一个值为auto以外的transform，我们就能够使用fixed定位来放置子元素，并且相对于创建包含块的祖先元素进行定位。

这里有个例子

例如：

.grandpa {
  position: relative;
  height: 500px;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.dad {
  position: absolute;
  width: 250px; height: 250px;
  bottom: 4em; left: 4em;
}

.son {
  position: fixed; /* This will be positioned with the respect to the grandpa
                      rather than the viewport */
  width: 100px; height: 100px;
  top: 2em; right: 2em;
}

另外，CSS 传奇人物 Eric Mayer 写了一篇关于此的文章:

使用 CSS 转换解决固定元素问题

一个被转换的元素即使是对于设置为 position: fixed 的后代元素也会创建一个包含块。换句话说，被转换元素的固定定位后代元素的包含块是被转换的元素，而非视口。

- Hashem Qolami

---

@Hashem - 这对于Chrome和其他webkit浏览器来说很棒，但如果我需要在ie9+中工作怎么办？ - Leann

@toddmo 你的意思是当grandpa向上或向下滚动时它停止工作？看起来儿子和父亲都不动。 - Isaac Montaine

@IsaacMontaine，我撤回了我的评论，因为现在在演示中，它们都会随着页面的滚动而一起滚动。 - toddmo

非常好的回答！但是你能更新一下你的链接从 W3C 编辑草案到工作草案吗？此外，这在 IE11 中似乎也不起作用。 - Vadim Ovchinnikov

这在2021年仍然有效吗？ - mozboz

好极了，我的朋友。这个使用类似于选择工具的交叉观察器非常有效 :) 我已经寻找类似的东西有一段时间了。 - zergski

Answer 2

我还没有真正理解你在问什么，但我已经编辑了你的CSS：

.gp {
   height : 200px;
   border : 1px solid red;
 }
 .p {
   height : 100px;
   width: 200px;
   border : 1px solid blue;
   position: absolute;
   top : 50px;
   left : 50px
}
.c {
    height : 50px;
    border : 1px solid green;
    position: absolute;
    top:0;
    left:0;
}

你写的是 positioned 而不是 position。告诉我现在它是否正常工作。

- Omar Enrico Polo

---

看看 Hasheem 的回答，那就是我想要实现的。 - StateLess