javascript - css 变换 :rotate(xdeg) puts element always in foreground

Question

i have 2 Pictures, 我想旋转光标。

工作正常，但我的导航栏是固定的，图像(光标)总是在 top 上导航栏。

这是我的代码:

[0].head1 { // navbar
[1]  position:fixed;
[2]  min-width:100%;
[3]  margin-top: 3rem;
[4]  z-index:14;
[5]}
[6]#cursor{ // cursor
[7]  margin-top: -48px;
[8]  transform: rotate(180deg);
[9]}

我已经尝试过使用我的光标的 z-index，并尝试了所有可能的位置。如果我在我的代码中删除第 8 行，它工作得很好，除了 roation..

我的 html 是:(我知道这些 head1、head2 等都不是必需的，稍后我会更改。

<div id="head1" class="head1">
    <div id="head2" class="head2">
      <div id="head3" class="head3">
        <p id="blabla" class="blabla">......</p>
        <div id="head4" class="head4">
          <p id="text" class="text"></p>
        </div>
        <div class="blend">
        </div>
      </div>
    </div>
  </div>
  <div class="content">

    <div style="min-height:13rem;"></div><!-- Spacer-->

    <table style="width:100%">
      <tr>
        <td class="detailEntrie"><strong>2012</strong></br>2013</td>
        <td class="detailEntrie"><strong>116i</strong></br>320d</td>
        <td class="detailEntrie"><strong>Juli</strong></br>September</td>
        <td class="detailEntrie">
          <p>Drivable?</p>
          <img src="assets/images/drivablemeter.png" alt="Driveable?" style="width:100px;">
          <img id="cursor" src="assets/images/drivablecursor.png" alt="Driveable?" style="width:100px;">

        </td> 
      </tr>
    </table>

Answer 1

您没有为固定的 .head1 指定任何 z-index 确保至少放置

.head1 {z-index: 1} 

到固定导航。请注意，z-index: 14 存在于您的原始代码中，但在您的真实页面示例中 - 它不存在