Question

我的子元素需要与祖父母一起定位absolute。问题是父母也是绝对定位的。

我无法使用JavaScript。我怎样才能用纯CSS实现这个目标？

<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; }

Answer 1

如果不支持Internet Explorer 8（及以下版本），我们可以通过纯CSS来实现。以下是您应该了解的CSS Transforms：

<强> 6 The Transform Rendering Model

对于布局由CSS框模型控制的元素，任何   变换的none以外的值导致创建   stacking context和containing block。物体   充当固定位置后代的包含块。

因此，我们向祖父母元素添加transform除auto以外的值，我们将能够使用fixed定位< em> child 元素，与创建包含块的 grandparent 元素有关。

<强> EXAMPLE HERE

例如：

.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写了一篇关于此的文章：

<强> Un-fixing Fixed Elements with CSS Transforms

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

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;
}

你已经写过定位而不是定位。告诉我现在是否有效

相对于祖父母，位置元素在绝对父级内

2 个答案: