Html Chrome中CSS列计数和位置相对行为

如果我为列计数内的项目使用相对位置，它不会出现在Chrome（最新版本）中

在以下代码中，

.left

具有

位置：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>

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

演示：

---

只需添加

位置：相对到
img
，如下所示：

img{
  position: relative;
}

你也可以查一下。我希望它能帮到你们：）
我刚才做了如下更改，现在正在显示图像

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

我认为如果你不在css中添加
top
，
left
，
bottom
和
right
值，它就像
position
static

一样，你已经删除了

.left{position:relative}

，但OP已经引用了他们需要

.left

类上的属性