not able to position text over image in a flex item

Question

I'm trying to position some text to the bottom right corner of an image that's in a flex layout. It doesn't seem to be working. I'm very new to flex and am making a lot of mistakes. I have a left column and a right column, both of which contact 6 rows of 2 images. In the middle I have some explanatory text. I want the numbers 1 through 12 to be superimposed on the lower right corner of each image.

html:

<div class="flexbox-container">
    <div class="flexbox-2col-container">
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" />
        <div class="number">1</div>
        </div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
    </div>
    <div class="flexbox-1widecol-container">
        <div class="middle"><h3>12 people to meet in 2018</h3></div>
    </div>
    <div class="flexbox-2col-container">
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
    </div>
</div>

css:

.flexbox-container {
        display:flex;
        flex-wrap:wrap;
        flex-direction:row;
        align-items:stretch;
        align-items: flex-start;
        justify-content: space-between;
    }
    .flexbox-2col-container {
        flex: 2;
        display:flex;
        flex-wrap:wrap;
        flex-direction:row;
        align-items:stretch;
        justify-content: space-between;
    }
    .flexbox-1widecol-container {
        flex: 1;

        padding: 10px;

    }
        h3 {
            font-family: Roboto, sans-serif;
            font-weight: 600;

        }
    .column50perc {
        width: 50%;
        padding: 10px 5px 0 5px;
        justify-content: space-between;
    }
    img {
        cursor: pointer;
        position: relative;
        display:block;
    }
    img:hover {

    }
    .middle {

    }
    .middle h3 {
        background-color: #404040;
        color: white;
    }
    .number {
        position: absolute;
        display: inline-block;
        bottom: 0;
        right: 0;
        background-color: black;
        color: white;
        z-index: 2;
        width: 50px;
        height: 50px;
    }

Please let me know what I'm doing wrong.

score 0 · Accepted Answer · answered Dec 12 '17 at 18:46

You are using absolute position so you should make the parent element relative position. Like that each box will be positioned relatively to his container and thus correctly positioned on the image:

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: stretch;
  align-items: flex-start;
  justify-content: space-between;
}

.flexbox-2col-container {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}

.flexbox-1widecol-container {
  flex: 1;
  padding: 10px;
}

h3 {
  font-family: Roboto, sans-serif;
  font-weight: 600;
}

.column50perc {
  padding: 10px 5px 0 5px;
  justify-content: space-between;
  position: relative;
}

img {
  cursor: pointer;
  position: relative;
  display: block;
}

img:hover {}

.middle {}

.middle h3 {
  background-color: #404040;
  color: white;
}

.number {
  position: absolute;
  display: inline-block;
  bottom: 0;
  right: 0;
  background-color: black;
  color: white;
  z-index: 2;
  width: 50px;
  height: 50px;
}

<div class="flexbox-container">
  <div class="flexbox-2col-container">
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" />
      <div class="number">1</div>
    </div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" />
      <div class="number">2</div>
    </div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" />
      <div class="number">3</div>
    </div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
  </div>
  <div class="flexbox-1widecol-container">
    <div class="middle">
      <h3>12 people to meet in 2018</h3>
    </div>
  </div>
  <div class="flexbox-2col-container">
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
  </div>
</div>

not able to position text over image in a flex item

1 Answers1