文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使标题元素出现在项目元素的前面

问如何使标题元素出现在项目元素的前面
EN

Stack Overflow用户

提问于 2022-10-24 15:27:52

回答 2查看 39关注 0票数 1

我有一个标题元素，我想成为粘性，并出现在我的文章前面。我试过改变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>

css-float

z-index

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-10-24 16:30:26

您有一些事情1可能是一个错误，另一个关于浮动元素和块格式上下文。

这里的

header，main和footer应该是两个兄弟姐妹(即使在main中可以有头和脚)

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

一个可能的解决办法是:从header和footer中提取main (__nav可以发送到header或保留在那里)。

然后通过main的块格式上下文(BFC)通过overflow:hidden或display:grid重置，或者在阅读后发现更合适的内容：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用于构建布局，它更简单、更强大(没有副作用)，浮点数可以用于最初制作的东西(不是完整的布局)，这是一个带有粘性页眉、导航和页脚https://jsfiddle.net/6r1o0sug/的示例。

票数 1

Stack Overflow用户

发布于 2022-10-24 15:54:03

创建导航栏时，请使用固定位置，并在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>

正如您所看到的，我在一个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;
}

此外，我将身体边缘设置为0，这样一切都非常适合。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74183443

复制

相似问题

问如何使标题元素出现在项目元素的前面
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使标题元素出现在项目元素的前面EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使标题元素出现在项目元素的前面
EN