Css 位置子 div 绝对到祖 parent

Question

我试图将一个 div 定位到窗口的右下角，而不是其父 div 的右下角。

例如

<div class="window">

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

</div>

.window 和 .parent 都有一个 position:relative;

.child 具有以下样式:

position:absolute;
bottom: 10;
right: 10;

但这会将它定位到 .parent 而不是 .window

Answer 1

没有通用的方法，我们需要考虑不同的情况。如果我们认为父级没有指定高度/宽度，这意味着父级将具有与窗口相同的宽度，因此正确的属性是好的。对于高度，如果父窗口是窗口的最后一个子窗口或者没有其他内容，底部属性也可以。

现在如果父级之后有元素，底部值应该等于

10px - height of all next siblging 

.window,
.parent {
  position: relative;
  border: 1px solid;
  min-height:50px;
}

.box {
  height: 100px;
  background:yellow;
}

.child {
  position: absolute;
  bottom: calc(10px - 200px);
  right: 10px;
  width: 20px;
  height: 20px;
  background:red;
}

<div class="window">

  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="box"></div>
  <div class="box"></div>
</div>

---

如果为父元素指定了高度，则同样的逻辑将适用，因为我们正在考虑底部，所以父元素的高度没有影响。

如果父元素指定了宽度，则right属性应该是

10px - (widow-width - parent-width)

.window,
.parent {
  position: relative;
  border: 1px solid;
  min-height:50px;
}
.window {
  width:500px;
}
.parent {
  width:200px;
}
.box {
  height: 100px;
  background:yellow;
}

.child {
  position: absolute;
  bottom: calc(10px - 200px);
  right: calc(10px - (500px - 200px)) ;
  width: 20px;
  height: 20px;
  background:red;
}

<div class="window">

  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="box"></div>
  <div class="box"></div>
</div>

所以你需要考虑你是在什么情况下，根据需要调整数值。当然，如果您的标记更复杂并且应用了更多 CSS，则情况并非如此。