Question

我对这些前端人员有疑问：

如何将div放在其父级的底部？

在我的身体标签中，例如100px高，我有一个div，高10px。

我现在如何让div转到body标签的底部，而不是转到顶部？

我真的无法解决这个问题！

问候
亚历

Answer 1

非常简单，就是这样做。

首先，您将position: relative定义为父
其次，您将position: absolute定义为子
使用top, left, right, bottom，您可以将子元素放在您想要的位置。

＆＃13;

.parent {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid #ccc;
}

.child {
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 10%;
  background-color: #000;
}

＆＃13;

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

＆＃13;

Answer 2

就像那样：

＆＃13;

div{
  background-color:red;
  width:100px;
  height:300px;
  position:relative;
}

div > div{
  background-color: blue;
  width:100px;
  height:100px;
  position:absolute;
  bottom:0px;
}

＆＃13;

<div>
<div>

</div>
</div>

＆＃13;

CSS：父元素底部的位置div？

2 个答案: