Moving text block over container - html

Question

I'm new so please be as simple as possible. I want to put words over a picture and got code that words below. The text appears on a black box in the lower right. I want it to appear in the upper left.
When I change in text box bottom to top and right to left it takes up the whole image. If I keep it on the right-it goes down all the way to the bottom of the image. Even if I try to increase the px to make it not so long it doesn't work. How can I fix this & what am I doing wrong?
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
<div class="container">
<img src="pdf/library.jpg" style="width:100%;">
<div class="text-block">
<h4>WORDS</h4>
</div>
</div>

Answer 1

The positioning of the element is based on the left, right, top and bottom and it will be relative the element you positioned to (in your case is the div with the container class).
If you will use only left and top it will work as you expect. The values is how much space from that side it will take.
Also, if you use 3 or 4 sides, it will stretch the element so the boundaries of it will be on the side you specified.
For example (I used sample image from google for the snippet):
#TEST {
background-image: linear-gradient(45deg,rgb(218,34,255) 30%,#9733ee 90%);
padding: 1em;
border-radius: 3px;
margin: 1em 0;
color: #fff;
}
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
top: 20px;
left: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
<section id="TEST">
<div class="container">
<img src="https://www.petcareplus.ie/wp-content/uploads/2020/04/dog-puppy-on-garden-royalty-free-image-1586966191.jpg" style="width:100%;">
<div class="text-block">
<h4>WORDS</h4>
</div>
</div>
</section>