I am currently learning CSS and HTML, as I'm working on a project for my final school assignment.
My goal is to position the text "Welcome" absolutely within a specific div that I've created. However, despite multiple attempts, I can't seem to get it to align correctly with its parent container.
The desired outcome is for the "Welcome" text to appear at the bottom of the welcome div. Unfortunately, when I include bottom:0px; in the CSS code, it doesn't adhere to its intended position relative to the container and ends up being placed 0px from the top of the entire screen.
Here is the relevant code snippet:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
height: 150px;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>