Best way how to put elements above an tag?

Tags: css,html5

Problem :

I have a list of cards where the background of the card is an image and some extra information must be put above it. Sounds like a nice job for background-image? Yeah, but as I need to set these images dynamically and the images need to be editable, background-image isn't an option (I know there are ways to do it, but it is not an option for this particular situation).

So here is what my card looks like

<figure>
<img src="foo.jpg" alt="">
<figcaption>
<h5>Name:<span>xyz</span></h5>
<h6>Location:<span>xyz</span></h6>
</figcaption>
</figure>

And the css what it SHOULD do, but it doesn't and it neither seems to me like a good routine:

.container-of_the-cards{ /* This is actually a <li> element with some different specs, but for illustration purposes I guess this one is easier */
width:100%;
display:inline-block;}
figure{
box-sizing:border-box;width:30%;height:300px;margin-right:1.1%;overflow:hidden;}
figure img{
width:100%;
height:100%;}
figcaption{box-sizing:border-box;margin:0 20px; background: blue; margin-top:-280px;}
figcaption h5{top-margin:30px;}
figcaption h6{top-margin:80px;}

So, now I have this problem:

margin-top:-280px;

I should rather prevent this, but how?

---

Solution :

You should add position: relative in order to take the element out of flow.

You will need to adjust the left and top attributes.

HTML

<figure>
    <img src="foo.jpg" alt="">
        <figcaption>
            <h5>Name:<span>xyz</span></h5>
            <h6>Location:<span>xyz</span></h6>
        </figcaption>
</figure>

CSS

.container-of_the-cards{ /* This is actually a li-element with some different specs, but for illustrational purposes I guess this one is easier */
    width: 100%;
    display: inline-block;
}
figure{
    box-sizing: border-box;
    width: 30%;
    height: 300px;
    margin-right: 1.1%;
    overflow: hidden;
}

figure img{
    width: 100%;
    height: 100%;
    position: relative;
}

figcaption{
    box-sizing: border-box;
    margin: 0 20px;
    background: blue;
    margin-top: -280px;
}

figcaption h5{
    top-margin:30px;
}

figcaption h6{
    top-margin:80px;
}

JSFIDDLE

If this is not the effect you want please edit your question to be more clear.