Html CSS具有绝对定位子项的多个相对div

我在创建一个有点奇怪的布局时遇到了一些问题，我在任何地方都找不到一个我想要做的事情的例子

我想布局多个块，如下所示：

 <div class="rel">
     <div class="item">--- a</div>
     <div class="item">- b</div>
     <div class="item">c</div>
 </div>

其中，所有.item元素都位于彼此的顶部，但.rel元素通常布局为可见。需要注意的是，.rel中的所有.item元素都具有完全相同的长度，但它们可能具有任意长度，因此它们可能会换行。下面是我正在尝试做的一个图像：

我创造了

解决方案

如果其他人发现自己需要这种真正奇怪的布局：

在物品上使用此选项

display: table-cell;

这个是靠关系的

display: inline-block;

看看这把小提琴

总代码：

.container {
  width: 200px;
}

.item {
  color: white;
  background: gray;
  margin: .1em;
  top: 0px;
  left: 0px;
  display: table-cell;
}    

.rel-2 {
  top: 0px;
  left: 0px;
  width: 100%;
  background: steelblue;
  margin: .2em;
  display: inline-block;
}

或者，您可以在项目上执行此操作，而不是在表格单元格上执行此操作：

float: left;

---

我不太确定您想要实现什么，但似乎您想要内联显示。可以使用float=left或display=inline块代替绝对定位。你的两个女主角现在都在一起了。 类似的东西

<div class="container">
  <div class="rel clearfix">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
  </div>
</div>

---

查看这里

我想知道这里的用例。我完全不知道您想要实现什么。我对这个示例进行了更改，并且能够实现我想要的。该示例将.item元素彼此相邻显示，我希望它们彼此重叠，我知道这很奇怪。所以我刚把.item{float:left}改为.item{position:absolute}，它按预期工作。谢谢！这很接近，但由于.item是一个表单元格，因此.items是相邻显示的，而不是像我试图实现的那样，在彼此的顶部显示。这很接近，谢谢你！这是因为您的示例显示它们相邻，因为这是您想要的。

.container {
  width: 200px;
}
.rel {
  width: 100%;
  background: steelblue;
  margin: 1em;
  padding: 1em;
  position: relative; 
}
.item {
  color: white;
  background: gray;
  margin: .1em;
  float:left;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }

.rel-2 {
  width: 100%;
  background: steelblue;
  margin: .2em;
  position: relative; 
}