postitioned text leaving space in its original place

Question

I've put an image followed by text in a div and used relative positioning to place the text over the image like so:

<div><img><p></p></div> 
p {position: relative; top: -250px;}

The problem is, there's a space below the image where the text was originally supposed to go and I can't figure out how to get rid of it. Playing with padding and margins don't seem to work. I'm making a responsive site using flexbox. If possible, I'd also like to position the text using div padding. Any suggestion is welcome.

Thank you!

May I change your HTML and CSS to get your desired output? The reason for the space is because `position:relative` does not remove space from the normal document flow like `position:fixed` and `position:absolute`. — Ian Hazzard, Nov 01 '14 at 19:33
See http://stackoverflow.com/questions/26560303/does-setting-position-to-relative-on-a-div-takes-it-out-of-document-flow/26560354#26560354 and http://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css — Hashem Qolami, Nov 01 '14 at 19:36

score 0 · Answer 1 · answered Nov 01 '14 at 19:39

You have to use position: absolute to situate the image title: http://jsfiddle.net/otc4L83b/.

HTML:

<div class = "imageWrapper">
    <img src = "http://placehold.it/300x200" />
    <p>Image Title</p>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.imageWrapper {
    position: relative;
    display: table;
}

.imageWrapper > p {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font: 18px/2 Sans-Serif;
    color: #fff;
}

postitioned text leaving space in its original place

1 Answers1