css - 让两个 div 漂浮在另一个的角落

Question

这是我需要的。我将有一个主 div，其中包含我的大部分内容。我不知道会有多少内容，所以我不能对主 div 的高度（比如说，以 px 为单位）做出任何假设。我需要做的是使两个 div（具有一定的固定大小）位于主 div 的左上角（当然，z-index 大于主 div）和右下角相同的div。我真的不知道如何做到这一点：谁能告诉我该怎么做？

非常感谢你！

马泰奥

Answer 1

您需要做的就是将主 div 位置设置为相对并将两个“角”覆盖绝对放置，一个顶部和左侧 0，另一个底部和右侧 0。如果您必须重叠角落，您将拥有使用负值（例如顶部：-5px；左侧：-5px；）。

/* The required CSS rules */
#container {
  position:relative;
}

.tl,.br {
  position:absolute;
}

.tl {
  left:0;
  top:0;
}

.br {
  right:0;
  bottom:0;
}

这里是 HTML 代码：

<div id="container">
  <div class="tl"></div>
  <div class="br"></div>
</div>

看看这里。

Answer 2

这应该适用于在另一个角落制作两个 div

.container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="container">
  <div>move left side</div>
  <div>move right side</div>
</div>