Using the :after pseudo element, I created a caption for the image. How can I make the caption stay on top of the image and not below?
.estrutura{
width:10%;
height:30%;
}
.estrutura:after{
position: fixed;
content:"Estrutura";
width:20%;
height:20px;
background-color: blue;
}<div class="estrutura">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/550px-Biandintz_eta_zaldiak_-_modified2.jpg">
</div> This should solve your problem. The position of .estrutura:after is as relative , and top: -32px was added to make the text rise and stay on top of the image.
.estrutura{
width:10%;
height:30%;
}
.estrutura:after{
position: relative;
content:"Estrutura";
width:20%;
height:20px;
top: -32px;
background-color: blue;
}<div class="estrutura">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/550px-Biandintz_eta_zaldiak_-_modified2.jpg">
</div> When using position: fixed; , the element will position itself relative to the document (whole window) rather than the parent element .
You must set position: relative; to parent-element so that the :after pseudo-element is positioned within it. Then with the styles top and left you position it where you want on the parent-element:
.estrutura{
width:10%;
height:30%;
position: relative;
}
.estrutura:after{
position: absolute;
content:"Estrutura";
width:20%;
height:20px;
background-color: blue;
bottom: 0;
left: 0;
}<div class="estrutura">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/550px-Biandintz_eta_zaldiak_-_modified2.jpg">
</div> Note that since you are restricting the element-parent dimensions with% less than the image itself, the dimension of .estrutura will be based on that size as well.