CSS multiple relative divs with absolutely positioned children - html

Question

I'm having some trouble creating a (somewhat strange) layout and I can't find an example anywhere of exactly what I'm trying to do.
I would like to layout multiple blocks that look like this:
<div class="rel">
<div class="item">--- a</div>
<div class="item">- b</div>
<div class="item">c</div>
</div>
where all of the .item elements are on top of one another, but the .rel elements layout normally so they are all visible. It's important to note that all the .item elements within a .rel will be of exactly the same length, yet they may be of any length, so they might wrap onto a new line. Here is an image of what I'm trying to do:
I've created this CodePen.
SOLUTION
In case anyone else finds themselves needing this truly strange layout:
CodePen

Answer 1

I am not exactly sure what you are trying to achieve, but it seems that you want <div class="item"> to display inline. you can use float=left or display=inline-block instead of absolute positioning. your divs are on top of each other right now .
Something similar to this
<div class="container">
<div class="rel clearfix">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</div>
and
.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;
}
check it out here http://codepen.io/anon/pen/vEExvM

Answer 2

Use this on item
display: table-cell;
and this on rel
display: inline-block;
Have a look at this fiddle. http://jsfiddle.net/h8rzw65p/
Total Code:
.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;
}
Or instead of table-cell you could do this on item:
float: left;