Home > front end >  How do I make a header element appear in front of an article element
How do I make a header element appear in front of an article element

Time：10-25

I have a header element that I want to be sticky and appear in front of my article. I have tried changing the z-index but I cannot seem to get it to work.

Does z-index not work at all when I have certain elements floating? Or is there a way to make it work? Any help would be appreciated. Thanks

h1,
h2,
h3,
h4 {
  margin: inherit;
}

.top {
  position: sticky;
  background-color: grey;
  margin: 0em;
  z-index: 1000;
  float: none;
}

.header {
  top: 0em;
}

.navigation {
  top: 2em;
}

.aside {
  width: 25%;
  height: 100%;
  float: right;
  background-color: darkgrey;
  clear: right;
}

.section {
  width: 75%;
  height: 100%;
  float: left;
  /*background-color: lightgrey;*/
}

.hidden_link {
  color: inherit;
  text-decoration: none;
}

* {
  z-index: -1;
}
<body>
  <main>
    <header >
      <h1>
        Toyota JZ Engine
      </h1>
    </header>
    <nav >
      <a>link</a>
    </nav>
    <article>
      <aside >
        <p><a  title="Multi-valve" href="https://en.wikipedia.org/wiki/Multi-valve">24 Valves</a> means that there are 4 valves per cylinder</p>
        <p><a  title="DOHC" href="https://en.wikipedia.org/wiki/Overhead_camshaft_engine#Double_overhead_camshaft_(DOHC)">DOHC</a> means that there are 2 Camshafts per bank of the sylinder head, 1 for intake and 1 for exhaust</p>
        <p>Rear Wheel Drive (RWD) is a type of drivetrain in which the gearbox sends all power to the rear wheels</p>
      </aside>
      <section >
        <h2>Introduction</h2>
        <hr>
        <p>The Toyota JZ engine family is a series of inline-6 automobile engines, which are designed as a replacement for the M-series inline-6 engines. The family features 2.5- and 3.0-litre versions; all are 24-valve DOHC engines.</p>
      </section>
      <section >
        <h3>1JZ</h3>
        <hr>
        <p>The 1JZ engine was produced from 1990-2007. It is 2,492 cc.</p>
        <h4>1JZ-GE</h4>
        <p>This is another common engine version which has a 10:1 compression ratio. The early 1JZ-GE, like all JZ engines, is desigined for longitudnal mounting and RWD. All such models offered only a 4-speed automatic transmission.</p>
        <h4>1JZ-GTE</h4>
        <p>The 1JZ also features a twin-turbocharged version, known as the 1JZ-GTE. It was produced from 1990-2007 as well and uses two CT12A turbochargers which sit parrallel and blow through a side or front mount intercooler. It has an 8:5:1 static compression
          ratio. Early generation 1JZ-GTEs combined the inherent smoothness of an inline 6 with the revving capacity of its short stroke and early power delivery of its turbochargers.</p>
        <figure>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg/250px-1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg" title="1JZ-GTE">
          <figcaption>1JZ-GTE in a 1991 Toyota Mark II 2.5GT Twin Turbo</figcaption>
        </figure>
        <figure>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg/250px-1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg" title="1JZ-GTE">
          <figcaption>Third Generation 1JZ-GTE VVT-i transplanted into a 1989 MX83 Toyota Cressida</figcaption>
        </figure>
        <h4>1JZ-FSE</h4>
        <p>1JZ-FSE is likely the least known engine of the JZ family. Their goal is to acheive minimal emissions and fuel consumption with no performance loss. It employs the same block as the conventional 1JZ-GE but the cylinder head has a relatively narrow
          angle with swirl conrol valves. Fuel consumpton is reduced by about 20%.</p>
        <h3>2JZ</h3>
        <hr>
        <p>The 2JZ engine was produced from 1991-2007. It is 2,997 cc. It is not merely a stroked version of the 1JZ, but it has longer connectiong rods and a taller block deck.</p>
        <h4>2JZ-GE</h4>
        <p>The 2JZ-GE is a common version with Sequential Electronic Fuel Injection, an auminium head, and 4 valves per cylinder, in addition to a cast-iron cylinder block.</p>
        <h4>2JZ-GTE</h4>
      </section>
    </article>
    <footer>

    </footer>
  </main>
</body>

CodePudding user response：

You have a couple things 1 that could be a mistake and another about floating element and block formatting context.

  • header, main and footer here are supposed to be two siblings (even that you can have headers and footers inside main)

  • floating element overflow their containers, You need to create a block formatting context (see the link below)

A possible fixed is : extract header and footer from main (nav can be sent to header or remain there).

Then reset the block formatting context(BFC) of main via overflow:hidden, or display:grid, or whatever you find more appropriate after reading : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts

h1,
h2,
h3,
h4 {
  margin: inherit;
}

main {
  overflow: hidden;/* wraps around and aside floats see BFC*/
}

.top {
  position: sticky;
  background-color: grey;
  margin: 0em;
  z-index: 1000;
  float: none;
}

.header {
  top: 0em;
}

.navigation {
  top: 2em;
}

.aside {
  width: 25%;
  height: 100%;
  float: right;
  background-color: darkgrey;
  clear: right;
}

.section {
  width: 75%;
  height: 100%;
  float: left;
  /*background-color: lightgrey;*/
}

.hidden_link {
  color: inherit;
  text-decoration: none;
}


/* * {
  z-index: -1;
}*/
<body>
  <header >
    <h1>
      Toyota JZ Engine
    </h1>
  </header>
  <nav >
    <a>link</a>
  </nav>
  <main>
    <article>
      <aside >
        <p><a  title="Multi-valve" href="https://en.wikipedia.org/wiki/Multi-valve">24 Valves</a> means that there are 4 valves per cylinder</p>
        <p><a  title="DOHC" href="https://en.wikipedia.org/wiki/Overhead_camshaft_engine#Double_overhead_camshaft_(DOHC)">DOHC</a> means that there are 2 Camshafts per bank of the sylinder head, 1 for intake and 1 for exhaust</p>
        <p>Rear Wheel Drive (RWD) is a type of drivetrain in which the gearbox sends all power to the rear wheels</p>
      </aside>
      <section >
        <h2>Introduction</h2>
        <hr>
        <p>The Toyota JZ engine family is a series of inline-6 automobile engines, which are designed as a replacement for the M-series inline-6 engines. The family features 2.5- and 3.0-litre versions; all are 24-valve DOHC engines.</p>
      </section>
      <section >
        <h3>1JZ</h3>
        <hr>
        <p>The 1JZ engine was produced from 1990-2007. It is 2,492 cc.</p>
        <h4>1JZ-GE</h4>
        <p>This is another common engine version which has a 10:1 compression ratio. The early 1JZ-GE, like all JZ engines, is desigined for longitudnal mounting and RWD. All such models offered only a 4-speed automatic transmission.</p>
        <h4>1JZ-GTE</h4>
        <p>The 1JZ also features a twin-turbocharged version, known as the 1JZ-GTE. It was produced from 1990-2007 as well and uses two CT12A turbochargers which sit parrallel and blow through a side or front mount intercooler. It has an 8:5:1 static compression
          ratio. Early generation 1JZ-GTEs combined the inherent smoothness of an inline 6 with the revving capacity of its short stroke and early power delivery of its turbochargers.</p>
        <figure>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg/250px-1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg" title="1JZ-GTE">
          <figcaption>1JZ-GTE in a 1991 Toyota Mark II 2.5GT Twin Turbo</figcaption>
        </figure>
        <figure>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg/250px-1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg" title="1JZ-GTE">
          <figcaption>Third Generation 1JZ-GTE VVT-i transplanted into a 1989 MX83 Toyota Cressida</figcaption>
        </figure>
        <h4>1JZ-FSE</h4>
        <p>1JZ-FSE is likely the least known engine of the JZ family. Their goal is to acheive minimal emissions and fuel consumption with no performance loss. It employs the same block as the conventional 1JZ-GE but the cylinder head has a relatively narrow
          angle with swirl conrol valves. Fuel consumpton is reduced by about 20%.</p>
        <h3>2JZ</h3>
        <hr>
        <p>The 2JZ engine was produced from 1991-2007. It is 2,997 cc. It is not merely a stroked version of the 1JZ, but it has longer connectiong rods and a taller block deck.</p>
        <h4>2JZ-GE</h4>
        <p>The 2JZ-GE is a common version with Sequential Electronic Fuel Injection, an auminium head, and 4 valves per cylinder, in addition to a cast-iron cylinder block.</p>
        <h4>2JZ-GTE</h4>
      </section>
    </article>
  </main>
  <footer>
    footer
  </footer>
</body>

For other tip, now-days flex or grid are used to build layouts and it is much easier and much more powerful (no side effects ), float can be used for what it was made at first (it was not entire layouts) here an example with a sticky header, nav and footer https://jsfiddle.net/6r1o0sug/

CodePudding user response：

When creating a navbar, use position fixed, and include all elements inside a div:

    <body>
    <main>
      <!-- Included the header and navigation in one div -->
      <div >
        <header >
          <h1>Toyota JZ Engine</h1>
        </header>
        <nav >
          <a>link</a>
        </nav>
      </div>

      <article>
        <aside >
          <p>
            <a
              
              title="Multi-valve"
              href="https://en.wikipedia.org/wiki/Multi-valve"
              >24 Valves</a
            >
            means that there are 4 valves per cylinder
          </p>
          <p>
            <a
              
              title="DOHC"
              href="https://en.wikipedia.org/wiki/Overhead_camshaft_engine#Double_overhead_camshaft_(DOHC)"
              >DOHC</a
            >
            means that there are 2 Camshafts per bank of the sylinder head, 1
            for intake and 1 for exhaust
          </p>
          <p>
            Rear Wheel Drive (RWD) is a type of drivetrain in which the gearbox
            sends all power to the rear wheels
          </p>
        </aside>
        <section >
          <h2>Introduction</h2>
          <hr />
          <p>
            The Toyota JZ engine family is a series of inline-6 automobile
            engines, which are designed as a replacement for the M-series
            inline-6 engines. The family features 2.5- and 3.0-litre versions;
            all are 24-valve DOHC engines.
          </p>
        </section>
        <section >
          <h3>1JZ</h3>
          <hr />
          <p>The 1JZ engine was produced from 1990-2007. It is 2,492 cc.</p>
          <h4>1JZ-GE</h4>
          <p>
            This is another common engine version which has a 10:1 compression
            ratio. The early 1JZ-GE, like all JZ engines, is desigined for
            longitudnal mounting and RWD. All such models offered only a 4-speed
            automatic transmission.
          </p>
          <h4>1JZ-GTE</h4>
          <p>
            The 1JZ also features a twin-turbocharged version, known as the
            1JZ-GTE. It was produced from 1990-2007 as well and uses two CT12A
            turbochargers which sit parrallel and blow through a side or front
            mount intercooler. It has an 8:5:1 static compression ratio. Early
            generation 1JZ-GTEs combined the inherent smoothness of an inline 6
            with the revving capacity of its short stroke and early power
            delivery of its turbochargers.
          </p>
          <figure>
            <img
              src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg/250px-1JZ-GTE_in_a_1991_Toyota_Mark_II_2.5GT_Twin_Turbo.jpg"
              title="1JZ-GTE"
            />
            <figcaption>
              1JZ-GTE in a 1991 Toyota Mark II 2.5GT Twin Turbo
            </figcaption>
          </figure>
          <figure>
            <img
              src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg/250px-1JZ-GTE_VVT-i_engine_in_1989_Toyota_Cressida.jpg"
              title="1JZ-GTE"
            />
            <figcaption>
              Third Generation 1JZ-GTE VVT-i transplanted into a 1989 MX83
              Toyota Cressida
            </figcaption>
          </figure>
          <h4>1JZ-FSE</h4>
          <p>
            1JZ-FSE is likely the least known engine of the JZ family. Their
            goal is to acheive minimal emissions and fuel consumption with no
            performance loss. It employs the same block as the conventional
            1JZ-GE but the cylinder head has a relatively narrow angle with
            swirl conrol valves. Fuel consumpton is reduced by about 20%.
          </p>
          <h3>2JZ</h3>
          <hr />
          <p>
            The 2JZ engine was produced from 1991-2007. It is 2,997 cc. It is
            not merely a stroked version of the 1JZ, but it has longer
            connectiong rods and a taller block deck.
          </p>
          <h4>2JZ-GE</h4>
          <p>
            The 2JZ-GE is a common version with Sequential Electronic Fuel
            Injection, an auminium head, and 4 valves per cylinder, in addition
            to a cast-iron cylinder block.
          </p>
          <h4>2JZ-GTE</h4>
        </section>
      </article>
      <footer></footer>
    </main>
  </body>

As you can see, I included all elements inside the top bar in a single div.

Css:

body {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  margin: inherit;
}

.navbar {
  /* Use position fixed, and z-index, set width to max*/
  position: fixed;
  z-index: 2;
  width: 100%;
  margin: 0;
  background-color: grey;
  float: none;
}

article {
  /* Add padding to content so that the navbar doesn't overlap */
  padding-top: 3.45rem;
}

.aside {
  width: 25%;
  height: 100%;
  float: right;
  background-color: darkgrey;
  clear: right;
}

.section {
  width: 75%;
  height: 100%;
  float: left;
  /*background-color: lightgrey;*/
}

.hidden_link {
  color: inherit;
  text-decoration: none;
}

Also, I set the body margin to 0 so that everything fits perfectly.

CodePudding user response：

remove the main element in the html

Page link：https//www.codepudding.com/frontend/587186.html

Prev:Need to customize the styling of iframe in css
Next:Logo above Navbar
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding