위치 : 헤더의 스티커가 작동하지 않습니다.

내 위치 : 스티커가 작동하지 않습니다. 내가 왜 그런지 모르겠다. 나는 이미 모든 것을 시도했다. 아래에는 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>

출처

2017-12-25 aillense

정상을 넣어 당신이 텍스트를 넣어하려는 경우 CSS는 이해할 수 없다, 그래서 추락 얻을 것이다. 나는 그것을 삭제했다 – aillense

가능한 복제본 [ "Position : sticky;" CSS 및 HTML 작동 안 함] (https://stackoverflow.com/questions/43707076/position-sticky-not-working-css-and-html) – Manishh

죄송합니다. 최선을 다하고 있습니다. 나는 px 만 지웠다. 상단 : 0; 아직 서있다. 하지만 어쨌든 작동하지 않습니다 – aillense

귀하의 문제는 당신이 CSS 파일에 // Second을 넣어했다. 0 픽셀 IST 문제가 아니라 : 당신이 /* 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>

출처

2017-12-25 10:42:20 Liam

@aillense이 답변이 문제를 해결합니까? – Liam

실수를 찾았습니다. 나는 디스플레이에 페이지를 가지고 있었다 : flex와 그 이유는 위치 : sticky가 작동하지 않았다. 거기에 방법이 표시됩니다 : 위치와 플렉스 : 끈적 거리는 작품? – aillense

@aillense align-self 추가 : 끈적 끈적한 요소에 대한 flex-start는 높이를 자동으로 설정하여 스크롤을 허용하고 고정했습니다. – Liam

위치 : 헤더의 스티커가 작동하지 않습니다.

답변

관련 문제