html - 相对位置不包含绝对定位元素

Question

由于某些原因，图像未包含在定位列中。我尝试在 img 上同时使用 display inline 和 display inline-block，但仍然无法正常工作。 Column 是一个具有相对位置的 flex 元素。行显示:flex。

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: auto;
  /*margin-right: -1rem;
  margin-left: -1rem;*/
  flex: 0 0 auto;
  margin-bottom: 10px;
  position: relative;
}


/* Column setup */

.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 1% 0 1% 1.6%;
  position: relative;
}

img {
max-width: 100%;
display: inline-block;
position: absolute;
}

链接到我的完整代码 http://codepen.io/Limpuls/pen/bBbZmL

Answer 1

应用 left: 0; 到 img

img{
max-width: 100%;
display: inline-block;
position: absolute;
left: 0; /* <<< */
}