如何同时将div的位置指定为绝对位置和相对位置

问题描述

我是这里的新手，我想知道如何同时将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的位置指定为绝对位置和相对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！