상위 div를 기준으로 'top'이있는 고정 위치 div

기본 부트 스트랩 템플릿 here의 맨 위에 고정 막대가 있습니다. div을 바로 아래에 놓고 싶습니다.상위 div를 기준으로 'top'이있는 고정 위치 div

<div style="background-color:#CF4342;color:#fff;top:40px;margin:0 auto;position:fixed;z-index:5000; width:50px;">Hello</div>

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="brand">Project name</a> 
     <div class="nav-collapse collapse" style="height: 0px;"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
      <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li class="nav-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
     <form class="navbar-form pull-right"> 
      <input type="text" placeholder="Email" class="span2"> 
      <input type="password" placeholder="Password" class="span2"> 
      <button class="btn" type="submit">Sign in</button> 
     </form> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div>

여기 아래에 갈 div에서 내 시도가있다 : 여기

는 (CSS 클래스 참조가되도록 페이지의 소스에서 바로 복사) 그 줄의 HTML의 거의 작동하지만 문제는 '상단 : 40 픽셀'입니다. 화면의 크기를 조정하면 상단의 고정 막대가 높이를 변경합니다.

막대의 높이에 관계없이 막대 바로 아래에 항상 있도록하려면 어떻게해야합니까? <center>

편집를 사용하지 않고 수평을 중심으로하는 방법에 대한 보너스 포인트 : 수평 중심의 일을 위해, 난 '여백 : 0 자동'를 추가 한 후 100 % 폭 사업부 내 사업부를 포장하고 시도 그것에을하지만, 고정 된 위치에서 작동하지 않습니다.

편집 2 : here은 jsfiddle입니다. html의 38 행은 내 시도입니다. 위의 모든 것은 nav bar div입니다.

출처

2013-06-23 user982119

어디에서 HTML 행을 배치합니까? –

바로 위에있는 더 큰 div 아래에 – user982119

에 의해 제안, 당신의 CSS에 다음과 같은 추가 :

Working Example

Full screen example을

x = (function() { 
var t = $('.navbar').height(); 
var c = $(window).width()/2 - $('.new').width()/2; 
    $('.new').css({ 
     top: t, 
     left: c 
    }); 
}); 

$(document).ready(x); 
$(window).resize(x);

참고 : 스크립트의 효과를보다 잘 보여주기 위해 미디어 쿼리로 예제를 업데이트했습니다.

는 물론 혼자 CSS와 함께이 작업을 수행 할 수 있지만, 그렇게 같은 미디어 쿼리를 사용해야합니다 :

CSS only working example

.new { 
    position:fixed; 
    margin: 0 auto; 
    top: 51px; 
    left:0; 
    right:0; 
    background-color:#CF4342; 
    color:#fff; 
    z-index:5000; 
    width:50px; 
} 
@media (max-width: 979px) { 
    .new { 
     top: 61px; 
    } 
}

공지 사항이 CSS의 유일한 해결책 것 "휴식" 너가 화면을 너무 멀리 좁히면. jQuery 솔루션에는 이러한 문제가 없다.

출처

2013-06-23 15:51:41 apaul

js에 의존하는 이유는 무엇입니까 당신은 순수한 CSS로 할 수 있습니까? navbar 높이는 고정되어 있으므로 계산할 가치가 없으며 고정 너비 요소를 사용하면 가로로 가운데 맞추기가 쉽습니다. http://jsfiddle.net/Pevara/MgcDU/5405/ – Pevara

저는 CSS를 사용하고 싶습니다만 JS와는 더 안전하다고 느낍니다. 탐색 막대의 높이를 높이기 위해 브라우저의 크기를 조정해도 CSS 솔루션이 작동하지 않습니다. – user982119

@PeterVR 업데이트보기 – apaul

이 줄을 CSS에 추가하거나 부트 스트랩 CSS 파일에서 클래스를 편집하십시오. css 파일이 부트 스트랩 CSS 파일 아래에 있는지 확인하여 직접 추가하십시오. 그것은 의미가 있습니까? 그것의에

.navbar-fixed-top { margin-bottom: 0 !important; }

출처

2013-06-23 15:20:33

붙여 넣기했습니다. 테스트하기 위해 큰 div에 인라인을 추가하려고했습니다. 작동하지 않습니다. – user982119

a) css class를 어디에 두어야하는지 b) html 및 css live를보고 알지 못하게하는 것이 정말 어렵습니다. jsfiddle를 만들 수 있습니까? –

내 질문에 jsfiddle 링크 – user982119

부트 스트랩은 다음을 말한다 documentation : .navbar 고정 정상 를 추가하고 <body>에 적어도 40px 패딩에 추가하여 아래의 숨겨진 영역 설명하기 위해 기억

. 을 코어 Bootstrap CSS 다음에 그리고 선택적인 반응 형 CSS 앞에 추가해야합니다.

그래서 내가 시도 할 것입니다 ...

내가 증명하기 위해 바이올린을 업데이트

http://jsfiddle.net/Pevara/MgcDU/5403/
나는 한 다음
- 영웅 유닛과 컨테이너 내부에 '인사를 이전
- '안녕하세요'에서 포지셔닝을 제거했습니다.
-에 설정된 10px 여백을 제거했습니다.컨테이너
- 당신은 이미 당신은 다음과 같이 사용할 수 jQuery를 사용하는 경우 부트 스트랩

body { 
    padding-top: 40px; 
}

출처

2013-06-23 15:48:22 Pevara

(유용한 정보 주셔서 감사합니다) – user982119

상위 div를 기준으로 'top'이있는 고정 위치 div

답변

관련 문제