position relative doesn't contain absolute positioned element

Question

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

relative position does not really contain an absolute positioned element. if you want the image inside the parent, you need to position it relative and not absolute. — GvM, Nov 03 '16 at 12:50
@GvM https://css-tricks.com/absolute-positioning-inside-relative-positioning/ — Limpuls, Nov 03 '16 at 12:55
if you want that, you need to set the height of the parent larger than your image. — GvM, Nov 03 '16 at 12:57
@GvM Oh, I see now. So if we don't have a container larger than the image, then we can just simply position the image relatively? — Limpuls, Nov 03 '16 at 13:05

score 2 · Accepted Answer · answered Nov 03 '16 at 12:49

2

Apply left: 0; to img

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

answered Nov 03 '16 at 12:49

jotavejv

1,936
2
16
16

Thanks, it's working now. I wonder why we need to declare `left: 0;` and `right: 0;` – Limpuls Nov 03 '16 at 12:57
2

@Limpuls, by applying `position: absolute` you're just removing the element from the normal flow. You're not actually positioning it anywhere. You need to then use the CSS offset properties (`left`, `right`, `top` and `bottom`) to position the element. Otherwise, the offsets default to `auto`, which leaves the element where it would otherwise be if it were in-flow ([more details](http://stackoverflow.com/q/40226155/3597276)). – Michael Benjamin Nov 03 '16 at 14:56
1

@Limpuls here is the best explanation about this behavior, take a look : http://stackoverflow.com/questions/19968979/what-are-the-default-top-left-botton-or-right-values-when-positionabsolute-is?answertab=active#tab-top – jotavejv Nov 03 '16 at 15:35

Dan Triva · Answer 2 · 2016-11-03T16:01:46.103

0

Remove position:absolute; on the img div the image will be inside a column. it should be like this img {max-width: 100%;display: inline-block;}

edited Nov 03 '16 at 16:01

answered Nov 03 '16 at 12:52

Dan Triva

71
8

First you advise to **remove** `position: absolute;`. In the next sentence your code sample advises to **use** `position: absolute; `. Are you out of your mind? – connexo Nov 03 '16 at 15:04

position relative doesn't contain absolute positioned element

2 Answers2