css - 使用 CSS 将两个元素放置在同一位置，并使容器足够大以容纳它们

Question

所以我有两个(或可能更多)元素想要占据相同的空间。它们需要放入一个容器元素中，容器元素的大小应该自动变得足够大以容纳它们。我目前有一些不太可行的可能性，如下所示:

.first {
  display: inline-block;
  position: relative;
  border: 1px solid black;
  padding: 1px;
}

.first > li {
  display: block;
  padding: 0px;
  margin: 0px;
  position: relative;
}

.second {
  display: inline-block;
  position: relative;
  border: 1px solid black;
  padding: 1px;
}

.second > li {
  display: block;
  padding: 0px;
  margin: 0px;
  position: absolute;
}

.third {
  display: inline-block;
  border: 1px solid black;
  padding: 1px;
}

.third > li {
  padding: 0px;
  margin: 0px;
  float: left;
  margin-right: -100%;
}

<div style="float:right; width: 75%">(Attempt 1: note that the two items are not superimposed, but the container is large enough to hold them)</div>
<ul class="first">
  <li>Item number 1</li>
  <li>Item number 2</li>
</ul> 
<br><br>
<div style="float:right; width: 75%">(Attempt 2: note that this time they are superimposed, but no space is allocated in the container for them)</div>
<ul class="second">
  <li>Item number 1</li>
  <li>Item number 2</li>
</ul>
<br><br><br><br>
Edited to add a third attempt:<br>
<ul class="third">
  <li>Item number 1</li>
  <li>Item number 2</li>
</ul>

理想情况下，我正在寻找一个纯 CSS 解决方案，但它只需要在基于 webkit 的浏览器(即 chrome/safari)上工作。

更新:添加第三次尝试让两个元素重叠，但分配足够的空间将它们并排放置，这仍然不能真正让我到达我想要的位置。

供引用:我事先不知道元素的大小，所以不能(例如)调整容器的大小以容纳最大的容器并使其余的与其重叠。

Answer 1

像这样吗？

ul {
  display: inline-block;
  position: relative;
  border: 1px solid black;
  padding:0; margin:0;
}

ul li {
  display: block;
  position: absolute;
  top:0; left:0;
}

ul li:nth-child(1) {
  position:relative;
}

<ul>
  <li>Item number 1</li>
  <li>Item number 2</li>
</ul>