make a header that hides behind the nav-CodePudding

Ok so i need to make a header that looks fixed to the user but it should lay behind the nav bar. My code is something like this:

<!DOCTYPE html>
<html lang="pt-br">
<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">
    <link rel="stylesheet" href="/styles/globalStyles.css">    
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="/styles/headerStyling.css">
    <link rel="shortcut icon" href="/assets/img/favicon.ico" type="image/x-icon">
    <title>Webwomen</title>
    <meta
      name="description"
      content="Está procurando oportunidades de estágio, emprego ou bolsas de estudo? 
      Ou até mesmo oportunidades para atender eventos de tecnologia no Brasil 
      e ao redor do mundo?"
    />
</head>
<body>
  <header>
    <nav><p>header</p></nav>
<img src="../../assets/img/header-img.png"  alt=""></header>
    <main>
      <div ></div>
    </main>
    <script src="jobsData.js"></script>
    <script src="index.js"></script>
</body>
</html>

body {
    position: absolute;
}

.header--image {
    position: relative;
    top: 0;
    left: 0;
}

I literally tried everything but it keeps scrolling down with my window

CodePudding user response：

position: absolute will position a child element to its next relative ancestor element (by default body). As such it will remain the position to that parent and scroll with it. If you want to keep an element at the top of the screen (viewport) then you want to position it with either sticky or fixed.

position: fixed will move an element out of flow an position it to the viewport. sticky will not move it completely out of flow. It will keep it remains an element of the parent and will move out of screen as soon as the parent leaves the screen.

header {
  position: fixed;
  top: 0;
}


/* for visualisation purpose only */
body {
  min-height: 1000vh;
  background: linear-gradient(to bottom, red 0, green 50%, blue 100%);
}

<header>
  <h1>HEADER</h1>
</header>

CodePudding user response：

body{background:#ff0000; min-height:1000ch; padding:0 auto; margin:0 auto;}

header{background:#000; width:100vw; height:70px; position:fixed;}

nav{width:90vw; float:right;}

nav p {color:#fff; font-size:2em; text-align:left; margin:0 auto; padding:10px 0;}

.header-image{width:10vw;}
img{max-height:70px;}

<header>
    <nav><p>header</p></nav>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdHO6b9-w3GKg6WiuzHKUcUsLc2bHrg1nxgQ&usqp=CAU"  alt="">

</header>