2012-09-13 3 views
6

고정되어 나는 위치를 준 : 고정이 스타일 시트 사용 :사업부 내가 사업부를 만든 CSS

CSS I이 원하는 것을 이제

position: fixed; 
top: 35px; 
z-index: 9999; 
height:60px; 
background:#000; 
width:100%; 

을 : 이 div의 높이가 0이면 div 바로 뒤의 div가 위 div의 자리에 와야합니다. div의 높이가 0이 아닌 경우이 div 다음의 div는 위의 div의 여백을 가져야하므로 두 div가 서로 겹치지 않습니다.

+0

jQuery를 사용할 수 있습니까? – Gustonez

+0

그래 내가 can.but 내가 css.i에 의해 어떤 해결책이 있다면 현재 jquery.first를 사용하여 고정 된 div의 표시를 설정 오전 none.on 페이지로드 이벤트입니다 내가 jquery로 확장하고 다음 다음 div에 약간의 마진. 그러나 이것의 모양과 느낌은 매우 끼어 들었다 – mjdevloper

답변

9

고정 된 (또는 절대적으로) 요소가있는 경우 그 뒤에 요소가 없습니다. 고정 요소는 문서 플로우에서 가져옵니다.

고정 된 위치에 두 개의 요소가 필요하면 고정 된 컨테이너를 만들고 그 안에 두 개의 요소를 넣으십시오.

둘레에 위쪽 여백이있는 다른 컨테이너를 넣고 두 번째 요소의 위쪽 여백을 설정할 수 있습니다. 첫 번째 요소가 비어 있으면 마진을 가질 것이 없으므로 여백이 컨테이너 외부에서 축소되고 두 번째 요소가 컨테이너의 맨 위에 위치하게됩니다.

은 (여백이 고정 된 요소 이외의 붕괴하지 않기 때문에 두 번째 용기가 필요합니다.)

데모 : http://jsfiddle.net/Guffa/r5crS/

+0

는 동의했다. .fixedCont div + div {margin-top : 10px;}로 두 번째 요소 (그 이후의 모든 요소)를 선택할 수 있습니다. – Ege

2

사용할 수 있다면 jQuery를 :

$(document).ready(function() { 
    var height = $("#one").height(); 
    if(height > 0) 
    { 
     $("#two").css("margin-top","10px"); 
    } 
}); 

Demo

1

다른 포스터는 레이아웃 요소에 대해 position: fixed 설정이 문서 fl 아우; 때로는 의도 된 (고정 된 위치 내비게이션과 같은). 의 폭으로,

var menuHeight = $("header").height(); 
$("main").css("padding-top", menuHeight); 
$(window).resize(function() { 
    var menuHeight = $("header").height(); 
    $("main").css("padding-top", menuHeight); 
}); 

홈페이지 내 사이트의 주요 내용이다 : 여기

내가 탐색의 높이가 변경 될 수 있습니다 액체 레이아웃의 문제를 회피하기 위해 사용했습니다 JQuery와 조각입니다 페이지가 변경되면 주 내용 상단의 패딩이 문서 흐름에있는 것과 유사하게 헤더 요소의 높이로 변경됩니다.

참고 : 코드는로드시 (장치 크기가 다른 경우) 및 창 크기 조정시 (사용자 창의 크기 조정시) 한 번 실행됩니다. 이것은 쉽게 깔끔하게 될 수 있지만, 그것은 나를 위해 잘 작동합니다.