小贝子编程

如何使header元素出现在article元素前面



我有一个标题元素，我希望它具有粘性并出现在我的文章前面。我尝试过更改z索引，但似乎无法使其发挥作用。

当我有某些元素浮动时，z索引根本不起作用吗？或者有办法让它发挥作用吗？如有任何帮助，我们将不胜感激。感谢

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>

您有两件事1可能是错误的，另一件是关于浮动元素和块格式化上下文的。

  • header、main和footer应该是两个兄弟(即使您可以在main中有页眉和页脚(

  • 浮动元素溢出了它们的容器，您需要创建一个块格式化上下文(请参阅下面的链接(

一个可能的解决方案是：从main中提取header和footer(nav可以发送到header或保留在那里(。

然后通过overflow:hidden或display:grid重置main的块格式化上下文(BFC(，或阅读以下内容后发现更合适的内容：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 class="header top">
<h1>
Toyota JZ Engine
</h1>
</header>
<nav class="navigation top">
<a>link</a>
</nav>
<main>
<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>
</main>
<footer>
footer
</footer>
</body>

对于其他提示，现在flex或grid被用于构建布局，它更容易、更强大(没有副作用(，float可以用于最初的制作(它不是整个布局(，这里是一个带有粘性页眉、导航和页脚的示例https://jsfiddle.net/6r1o0sug/

创建导航栏时，使用固定位置，并将所有元素包含在div中：

<body>
<main>
<!-- Included the header and navigation in one div -->
<div class="navbar">
<header class="header">
<h1>Toyota JZ Engine</h1>
</header>
<nav class="navigation">
<a>link</a>
</nav>
</div>
<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>

正如你所看到的，我在一个分区中包含了顶部栏中的所有元素

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;
}

此外，我将正文边距设置为0，以便所有内容都完美匹配。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium