Need help understanding nesting-CodePudding

I am having trouble with getting a HTML website to display the way I want. I have made a banner and a nav bar, but I'm having a hard time when trying to add anything below the nav; it either covers the banner or gets covered by it.

This is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Home: Old Barber </title>
</head>
<body id="body"><link rel="stylesheet" href="test.css">
    <div id="wrapper">
        <header id="header"> Welcome </header>
        <div id="bannerHolder">
            <div class="banner">
                OLD BARBER
            </div>
            <nav id="nav">
                <a href="test_template.html"> Home </a>
                <a href="test_template.html"> Products </a>
                <a href="test_template.html"> About </a>
            </nav>
        </div>
    </div>
    <div class="container">
        <img src="https://www.open.edu/openlearn/ocw/pluginfile.php/1654608/mod_oucontent/oucontent/93155/8a822f73/b6b08556/mse_s6_figure_3.jpg" alt="Barber" class="img"></img>
        <div class="overlay">
            <div class="text">Shop</div>
        </div>
</body>
</html>

Here is the CSS:

/* Imported fonts */
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');

#wrapper {
    background: orange;
    display: block;
    margin: auto;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;
}

#bannerHolder {
    background: #aaa;
    display: block;
    height: 100px;
}

#bannerHolder .banner {
    background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
    background-position: center;
    background-size: 100%;
    color: white;
    font-family: 'Merienda', cursive;
    font-size: 800%;
    height: 200%;
    left: 0;
    margin: auto;
    position: relative;
    right: 0;
    text-align: center;
    text-shadow: 2px 2px 4px black;
}

#body{
    background-color: gray;
}

#nav{
    background-color: orange;
    color: black;
    display: flex;
    justify-content: space-around;
    padding: 0.5%;
    position: relative;
    text-align: center;
}

#h1{
    font-family: 'Italianno', cursive;
}

.container{
    position: relative;
    width: 50%;
}

.img{
    display: block;
    height: auto;
    width: auto;
}

.overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    opacity: 0;
    transition: .5s ease;
    background-color: orange;
}

.container:hover .overlay{
    opacity: 1;
}

.text{
    color: white;
    font-size: larger;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Any help is greatly appreciated. Thanks.

EDIT: under is the result after removing the position: absolute; from the header. This, however, also alters the way in which I'd like the page to be displayed; which is that the banner, nav etc. is supposed to fill the page on the left, right and top.

CodePudding user response：

The problem is that You have

<div id="wrapper"> and <div class="container"> below.

<div id="wrapper"> - has position: absolute as a style.

Position absolute https://developer.mozilla.org/en-US/docs/Web/CSS/position:

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

That means that Your wrapper div, creates no space, so container div ignores its position.

Try to remove position: absolute from Your header.

Edit:

Sorry for late answer

#wrapper {
    background: orange;
    text-align: center;
}

#bannerHolder .banner {
    background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
    background-position: center;
    background-size: 100%;
    color: white;
    font-family: 'Merienda', cursive;
    font-size: 800%;
    text-align: center;
    text-shadow: 2px 2px 4px black;
}

body {
    background-color: gray;
    margin: 0;
    padding: 0;
}

Edited CSS for header would look something like this. What I've done is I removed the height parameter of #bannerHolder. This height was defining the height of 100px for bannerHolder, however the height of the inside elements of bannerHolder was bigger, so there was an overlap. I also removed some unused CSS properties.

Also for banner to fill the whole space - the common pattern is to set padding: 0; margin: 0; for body tag. I often start my projects with this set-up:

html, body {
  padding: 0;
  margin: 0;
}

https://jsfiddle.net/oamx38y6/36/