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;
}
If this is not the effect you want please edit your question to be more clear.