绝对的位置正在崩溃

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;
}

所有的div都完全崩溃了。

请参阅此处https://jsfiddle.net/a1quymqe/3/

我想要的只是相同的主题应该在“subjectParent”类中一起崩溃。

我想要的结果：

（这些div后面有两个相同的div）

Answer 1

.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

Answer 2

解决方案是给最后一个孩子位置相对。无论您使用多少div，这都有效。

.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/