Question

工作正常，但我的导航栏已修复，图像（光标）始终位于导航栏的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行，它的工作完全正常，除了动作..

我的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存在于您的原始代码中，但在您的实际页面示例中 - 它不存在

css transform：rotate（xdeg）将元素始终放在前台

1 个答案: