位置絕對是崩潰

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