CSS: Why isn't "position: absolute" working?

I would like to post my projects on my website. Before I do that, I want a good way to display them on the "portfolio" page. I've been playing around with some options and decided to create "tiles" that would show "See More" when the user hovers over them. I'm a fan of using the least amount of languages possible in code (for simplicity). Therefore, I really wanted to do this with CSS only.

This is the HTML code:

<section class="tile"> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac feugiat tellus. Donec vestibulum dictum lacus, vitae eleifend erat fringilla eget. Morbi congue efficitur varius. Nunc nibh tellus, gravida ac turpis sit amet, hendrerit commodo est. Cras dignissim a dolor at congue. Aliquam ultrices maximus mi. Sed sit amet eleifend enim. Curabitur mattis dolor purus, quis egestas lorem hendrerit vitae. Proin vel rhoncus dui. Nulla sodales, leo ut imperdiet semper, ex sapien elementum leo, id pharetra magna sapien ut turpis. Nulla sit amet pulvinar nisi. Nullam vel dui purus. Integer non faucibus nibh. Ut nec tincidunt lorem, a mollis orci. Suspendisse nibh ligula, molestie et cursus nec, efficitur vitae lorem. Nam vitae malesuada massa.</p> <a href="http://michellemiller.online/" class="more">See More</a> </section>

And here was the CSS:

.tile { margin: 1em; height: 15em; overflow: hidden; border: .1em solid red; } .tile .more { background: black; color: white; z-index: 1; position: absolute; display: block; left: 0; right: 0; bottom: 0; visibility: hidden; font-size: 2em; } .tile:hover .more { visibility: visible; }

In the CSS, I set the elements in the "more" class to have an absolute position. According to W3schools, this should have made the element positioned to the parent element. Instead, it was set to the window. See below:

So what happened?

For "position: absolute" to work correctly, the parent element needs to have "position: relative". This time, I remembered this almost immediately. The first time I ran into this issue, I spent quite a bit of time trying to solve the problem. It's one of the little things that can slow beginners to CSS down.

And here is the new CSS:

.tile { margin: 1em; height: 15em; overflow: hidden; border: .1em solid red; position: relative; } .tile .more { background: black; color: white; z-index: 1; position: absolute; display: block; left: 0; right: 0; bottom: 0; visibility: hidden; font-size: 2em; } .tile:hover .more { visibility: visible; }

The end result:

Learn more about the CSS position property here.