position:标头中的粘滞不起作用

问题描述 投票:0回答:1

我的立场:粘不起作用。我不知道为什么会这样,我已经尝试了一切。下面我发布了我的html和css代码。

// Second
.app-secondheader {
    height: 85px;
    overflow: visible;
    top: 0px;
    background-color: #3B3B3B;
    border-bottom: 4px solid #ED1C24;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding-left: 30px;
    padding-right: 30px;
    top: 0;
    position: -webkit-sticky;
    position: sticky;
}
<!-- Login -->
<nav>
    <!-- Second -->
    <div class="app-secondheader">
      <div class="row">
        <!-- Logo -->
        <div class="pares-logo">
          <a class="pares-logo-link" href="http://test.pares.de">
            <img class="logo" src="./assets/img/logo.png" target="_blank" data-placement="top" data-title="" data-toggle="tooltip" title="" data-original-title="Logo" alt="MyLogo">
          </a>
        </div>
      </div>
    </div>
  </nav>
css sticky
1个回答
0
投票

你的问题是你把// Second放在CSS文件中。 CSS无法理解,如果你想把文字放到/* This text will work in CSS file */它就会崩溃

.app-secondheader {
    height: 85px;
    overflow: visible;
    background-color: #3B3B3B;
    border-bottom: 4px solid #ED1C24;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding-left: 30px;
    padding-right: 30px;
    top: 0;
    position: -webkit-sticky;
    position: sticky;
}
<!-- Login -->
<nav>
    <!-- Second -->
    <div class="app-secondheader">
      <div class="row">
        <!-- Logo -->
        <div class="pares-logo">
          <a class="pares-logo-link" href="http://test.pares.de">
            <img class="logo" src="./assets/img/logo.png" target="_blank" data-placement="top" data-title="" data-toggle="tooltip" title="" data-original-title="Logo" alt="MyLogo">
          </a>
        </div>
      </div>
    </div>
  </nav>
© www.soinside.com 2019 - 2024. All rights reserved.