如何同时将div的位置指定为绝对位置和相对位置 [英] how to specify a div's position as absolute and relative at the same time

问题描述

我是这里的新手，我想知道如何同时将div的位置指定为绝对位置和相对位置，因为div可以同时是孩子和父母.谢谢您的帮助

I'm new here and I want to know how to specify a div's position as absolute and relative at the same time, Because a div can be a child and parent simultaneously . Thank you for your help

推荐答案

如果孩子的位置绝对正确，则任何孙子都可以再次相对于孩子绝对地定位

If the child is positioned absolutely, any grandchild can be again positioned absolutely in relation to the child.

也就是说，子代不需要具有 position:relative 来相对于其绝对地定位.

That is, the child does not need to have position:relative for the grandchild to be positioned absolutely in relation to it.

因此可以认为孩子具有 position:absolute 的自身位置，但也可以相对"，因为它也形成了参考点>确定孙子的位置.

So the child could be considered to have position:absolute for it's own positioning but also "relative" as it also forms the reference point for the positioning of the grandchild.

<div class="parent">
  <div class="child">
    <div class="g-child"></div>
  </div>
</div>

.parent {
  width: 350px;
  height: 350px;
  background: rebeccapurple;
  margin: 1em auto;
 position: relative;
}

.child {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 50px;
  top: 50px;
  background: orange;
}

.g-child {
  position: absolute;
  width: 25px;
  height: 25px;
  background: #f00;
  top:125%;
  right: 0;
}

> Codepen演示

这篇关于如何同时将div的位置指定为绝对位置和相对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！