相对于其他div定位div

Question

我有一个设计问题，我不知道如何处理。

我有3个并排的div，中间的一个将有5个子div，它们被放置在相邻的div（div1和div2）周围，一些在侧面，一些在下面。

最初我将中心div（蓝色虚线）放在相对位置，其子div绝对位于顶部，右侧，左侧，底部。

我不确定这是一种理想的方法，特别是如果我希望能够增强移动布局。

我尝试按如下方式手动定位元素，但看起来非常麻烦：

<div class="col col-2">
    <div class="items">
        <div class="item item-1">1</div>
    </div>
</div>

.col { position:relative; }
.item { width:55px;height:55px; position:absolute; }
.item.item-1 { top:0; left:0; }

这里有完整的例子：

• https://jsfiddle.net/soch/fxgmq6om/1/

我喜欢洞察这个，

谢谢， S上。