I'm struggling with making my header element sticky and appear in front of my article. Modifying the z-index hasn't given me the desired result so far.
Is the z-index ineffective when dealing with floating elements? Or is there a workaround to make it function as intended? Any assistance on this matter would be greatly appreciated. Thank you
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 class="header top">
<h1>
Toyota JZ Engine
</h1>
</header>
<nav class="navigation top">
<a>link</a>
</nav>
<article>
<aside class="aside">
<p><a class="hidden_link" 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 class="hidden_link" 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 class="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 class="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>