position absolute is collapsing - html

Question

HTML:
<div>
<div id="Science" class="subjectsParent">
<div class="subject" draggable="true">
Science
</div>
<div class="subject" draggable="true">
Science
</div>
<div class="subject" draggable="true">
Science
</div>
</div>
<div id="Sports" class="subjectsParent">
<div class="subject" draggable="true">
Sports
</div>
<div class="subject" draggable="true">
Sports
</div>
<div class="subject" draggable="true">
Sports
</div>
</div>
<div id="Physics" class="subjectsParent">
<div class="subject" draggable="true">
Physics
</div>
<div class="subject" draggable="true">
Physics
</div>
<div class="subject" draggable="true">
Physics
</div>
</div>
</div>
CSS:
.subject {
display: block;
position: absolute;
background-color: green;
margin: 5px;
padding: 5px;
color: white;
}
.subjectsParent {
display: inline-block;
position: relative;
}
All the divs are collapsing altogether.
See here https://jsfiddle.net/a1quymqe/3/
What I want is only the same subjects should collapse together in there "subjectsParent" class.
Result I want:
(2 more same div behind these divs)

Answer 1

The solution is to give the last child position relative. This works no matter how many divs you use.
.subject {
display: block;
position: absolute;
background-color: green;
margin: 5px;
padding: 5px;
color: white;
}
.subject:last-child {
position: relative;
}
.subjectsParent {
display: inline-block;
}
https://jsfiddle.net/avvwa75h/1/

Answer 2

.subject {
display: block;
position: relative;
background-color: green;
margin: 5px;
padding: 5px;
color: white;
}
.subjectsParent {
display: inline-block;
position: relative;
}
//first two can be absolute
.subjectsParent .subject:first-child,.subjectsParent .subject:nth-child(2){
position: absolute;
}
working JSfiddle here