Limpuls Limpuls - 1 month ago 6
CSS Question

position relative doesn't contain absolute positioned element

For some reason image isn't contained inside positioned column. I tried using both display inline and display inline-block on img, but still won't work. Column is a flex item with position relative. Row is display: 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;
}


Link to my full code http://codepen.io/Limpuls/pen/bBbZmL

Answer

Apply left: 0; to img

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