html – 相对于祖父母的位置元素在绝对父级内

发布时间：2020-12-14 18:43:01 所属栏目：资源来源：网络整理

导读：我有子元素需要与祖父母绝对定位.问题是父母也是绝对定位的. 我不能使用JavaScript.我怎样才能用纯CSS实现这个目标？ JSFiddle Demo 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 { h

我有子元素需要与祖父母绝对定位.问题是父母也是绝对定位的.

我不能使用JavaScript.我怎样才能用纯CSS实现这个目标？

JSFiddle Demo

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

解决方法

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

07001

For elements whose layout is governed by the CSS box model,any
value other than none for the transform results in the creation of
both a 07002 and a 07003. The object
acts as a containing block for fixed positioned descendants.

因此,我们将一个除auto之外的值的变换添加到祖父元素中,我们将能够使用固定定位将子元素放置在创建包含块的祖父元素的方面.

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

07005

A transformed element creates a containing block even for descendants that have been set to position: fixed. In other words,the containing block for a fixed-position descendant of a transformed element is the transformed element,not the viewport.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!