Chrome瀏覽器中的CSS列數和位置相對行爲

Question

如果我使用位於列數內的項目的位置相對，它不會出現在Chrome（最新版本）中。

在下面的代碼中，.left有position: relative，它不會出現。

如何在不移除相對位置屬性的情況下使其工作？

HTML：

<div class="container">     
    <div class="box">Lorem ipsum dolor sit amet</div> 

    <div class="box"> 
     <div class="item"> 
      <div class="left"><img src="http://i.imgur.com/E4rkDHN.jpg" /></div> 
      <div class="right">luctus et ultrices posuere cubilia Curae</div> 
     </div> 
    </div> 
<div> 

CSS：

.container { 
    width: 500px; 
    overflow: hidden; 
    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    column-count: 2; 
    column-gap: 20px; 
} 

.box { 
    width: 240px; 
    overflow: hidden; 
    break-inside: avoid-column; 
    -webkit-column-break-inside: avoid; 
    -o-column-break-inside: avoid; 
    -ms-column-break-inside: avoid; 
    column-break-inside: avoid; 
    -webkit-backface-visibility: hidden; 
    margin-bottom: 20px; 
    background: yellow;  
} 

.left { 
    position: relative; 
} 

演示： http://jsfiddle.net/eLmhedrt/

Answer 1

只需添加position: relative;到img，如T他的：

img{ 
    position: relative; 
} 

你也可以在jsfiddle上檢查一下。我希望它能幫助你:)

Answer 2

我只是改變了如下現在圖像顯示

.left { 
    position: relative; 
    margin:2px ; 
}