使两个 div 漂浮在另一个的角落上

Question

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

非常感谢！

马泰奥

Answer 1

您需要做的就是将主 div 位置设置为相对位置，并将您的两个“角”覆盖绝对放置，一个顶部和左侧 0，另一个底部和右侧 0。如果您必须重叠角落，您将有使用负值（例如 top:-5px; left:-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>

看看这里。