位置绝对是崩溃

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/

只看到相同的主题，应一起崩溃中就有“subjectsParent”类我想是。

结果我想：

（这些div后面2个相同的div）

Answer 1

的解决方案是赋予相对的最后一个子位置。无论您使用多少个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/

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