고정 요소가있는 사이트 상단에 막대 추가

-1

다음 예제와 같이 상단 막대를 추가 할 사이트가 있습니다. http://demo.codesupply.co/ 그러나 iframe을 사용하지 않으려 고합니다. 사이트의 현재 CSS를 수정하십시오. 사이트의 상단에 붙어있는 자체 클래스로 새 div를 만들 수 있어야하지만 내 사이트에는 사이트 상단에 배치되는 position:fixed; top:0; 탐색 모음이 있습니다. 그런 다음 겹칩니다.고정 요소가있는 사이트 상단에 막대 추가

다른 요소를 덮지 않고 전체 사이트 위에 새로운 톱 바를 배치하려면 어떻게합니까?

* 나는 아직도 downvote의 이유를 볼 수 없다. 그것은 완전히 합법적 인 질문이다.

출처

2017-03-05 human

페이지의 CSS를 변경할 수 없다면 클래스를 추가하면 어떤 이점이 있습니까? 어쨌든 너비가 100 % 인 새 div를 추가 할 수 있으며 고정 된 위치와 상위 0이지만 확장 할 수있는 Z- 색인이 포함될 수 있습니다. 그게 무슨 뜻입니까? – Tularis

나는 모든 사이트에이 최고 막대를 삽입하는 WordPress 플러그인을 추가하고 있으므로 원본 사이트를 개정 할 수 없으므로 그 의미를 알 수 있습니다. Z- 색인은 계속해서 내 최상위 막대와 잠재적 위치를 겹치게합니다. 상단 : 0; 요소. 내 상단 바를 사이트 상단에 배치 한 다음 전체 사이트를 상단 바 아래에 배치하여 기본적으로 iframe없이 제공되는 예제를 시뮬레이트합니다. – human

CSS에 액세스 할 수없는 경우 인라인 CSS를 사용하고 의미가있는 'PUSH (푸시)'방법을 사용하여 페이지 아래로 콘텐츠를 푸시하여 겹치지 않게 할 수 있습니다. 여기 JsFiddle은 : 당신이 인라인 CSS를 싫어하는 경우

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 40px;> 
    Hello, I am Menu, nice to meet you. 
</div> 
<div class="container" style="margin-top: 40px;"> 
    This is where your existing content lives. 
</div>

그때 당신은 단순히 HTML5 몸 후 <style>을 추가 할 수 있습니다 https://jsfiddle.net/SimonHayter/090ar1u0/

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 40px;> 
    Hello, I am Menu, nice to meet you. 
</div> 
<div style="height:40px;width:100%;"> 
    Let's push the page down 40px, you can't see me! 
</div> 
<div> 
    Existing Content 
</div>

아니면 그냥 즉, 기존의 HTML이 margin-top 추가, 편집 할 수 과 같이 :

<body> 
    <style> 
     .menu { 
      position: fixed; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 40px; 
     } 
     .container { 
      margin-top: 40px; 
     } 
    </style> 
    <div class="menu"> 
     Hello, I am Menu, nice to meet you. 
    </div> 
    <div class="container"> 
     Existing Content 
    </div> 
</body>

당신은 다음 Modifying static content using a CGI script에 아파치를 사용할 수 있습니다 중 하나를 HTML에 액세스 할 수없는 경우.

출처

2017-03-05 19:29:23

다음과 같이'position : fixed; '요소가 내 최상단 막대와 겹칠 것이므로이 방법은 작동하지 않습니다. https://jsfiddle.net/b8p5ckvc/ – human

그런 다음 메뉴에서'top : 0'을 사용하지 마십시오. 위의 막대의 높이를 사용하십시오. 즉, https://jsfiddle.net/SimonHayter/b8p5ckvc/1/ 또는 '' –

을 사용하십시오. 이번에는 JSFiddle 스타일이 https : //jsfiddle.net/SimonHayter/b8p5ckvc/4/ –

고정 요소가있는 사이트 상단에 막대 추가

답변

관련 문제