在祖父母的绝对父母内部定位元素 [英] Position element inside absolute parent with respect to grandparent

问题描述

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

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

JSFiddle Demo

 < div class =col-md-6 gp> 
< div class =col-md-4 p> 
< div class =col-md-2 c>将我的w.r.t放到.gp< / div> 
< / div> 
< / div> 
  

.gp {height：为200px;位置：相对; }

.p {
height：100px; width：250px;
位置：绝对;
top：50px; left：50px;
}

.c {position：absolute; height：50px;如果支持Internet Explorer 8（及以下版本）是如果支持Internet Explorer 8（和更低版本）是不用担心，我们可以通过纯CSS实现。以下是您应该了解的 CSS变换：

6变换渲染模型

对于其布局受CSS盒模型控制的元素，除 none 以外的任何
值对于转换，会创建
，这两者都是堆叠上下文和。对象
充当固定位置后裔的包含块

。

因此，我们添加一个转换的值不是 auto 到祖父母元素，我们将能够使用 fixed 定位将 child 元素与正在创建包含块的祖父母元素相关联。 / p>

示例

例如：

.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;
底部：4em;左：4em;
}

.son {
position：fixed; / *这将被定位为尊重祖父
而不是视口* /
width：100px; height：100px;
top：2em;右：2em;
}


此外，CSS Legendary Eric Mayer撰写了一篇关于此的文章：

使用CSS变换解除固定元素

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

I have child element which need to be positioned absolute with the grandparent. The problem is that the parent is also positioned absolutely.

I can't use JavaScript. How can I achieve this with just pure 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; }

解决方案

If supporting Internet Explorer 8 (and below) is not a concern, we could achieve that by pure CSS. Here is what you should know about CSS Transforms:

6 The Transform Rendering Model

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 stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

Hence, we add a transform with a value other than auto to the grandparent element, we will be able to use fixed positioning place the child element with the respect of the grandparent element which is creating the containing block.

EXAMPLE HERE

For instance:

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

Also, CSS Legendary Eric Mayer has written an article about this:

Un-fixing Fixed Elements with CSS Transforms

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.

这篇关于在祖父母的绝对父母内部定位元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！