I need to make the position of the header and the nav fixed without changing the position of the content that follows

Question

I need to make the position of the header and the nav fixed without changing the position of the content that follows

Navigation

#1 by (2 votes)

0

I have the following CSS code so that the header and the nav stay in the same place when you scroll to the page, but the content that follows is positioned at the top of the page remaining below the header and the nav hidden. I need to accommodate it and position itself after nav .

     header{
     position: fixed;
     margin-top: -10px;
     background-color: gray;
     margin-left: -8PX;
     padding: 1px;
     margin-top: -41PX;
     padding-left: 15px;
     color: white;
     width: 100%;

}

    nav{
    background: #2D787B; 
    margin-left: -8px;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top-color: white;
    border-top-width: 3px;
    border-top-style: solid;
    position: fixed;
    margin-top: 35px;
    width: 100%;
}

html css

asked by user20100 19.11.2016 в 13:51

source

1 answer

error ts6053 file '* .ts' not found Equivalent to DESCryptoServiceProvider in Java [closed]

score 2 · Accepted Answer

The fixed elements are removed from the normal flow of the document and are displayed as a separate context, so that does not take place in the sequence of elements. One option is to put an empty element that occupies that space and that is part of the normal flow of the page. This works if the elements have a known height and if it is at the beginning of the page.

Simplified example: the <header> and the <nav> total 70 CSS pixels in height so the "filling" must also be high.

header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: blue;
  height: 50px;
}

nav {
  position: fixed;
  top: 50px; left: 0; right: 0;
  background: red;
  height: 20px;
}

#relleno {
  height: 70px;  
}

<header>Este es el header</header>
<nav>Este es el NAV</nav>
<div id="relleno"></div>
<p>Este es el elemento que siguie</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>
<p>y otro mas</p>