2013-06-13 3 views
6

"절대 위치 요소는 가장 가까운 위치의 조상에 상대적으로 배치됩니다." - MDN: position - CSS가장 가까운 위치에있는 조상을 무시할 수 있습니까?

position:relative;으로 정의 된 부모가 있었을 때 나는 이것을 이해했지만, 내가 깨닫지 못했던 것은 position:absolute이라는 기술적으로 "위임 된 조상"으로 인정되었습니다. http://jsfiddle.net/MSzZG/ "상단에"텍스트가 top 속성을 가질 수 있다면 대신 포함 div의 창에 적용하지만 우회 할 수 있다면 난 그냥 알아낼 수 없습니다 좋은 것 : 여기

는 샘플입니다.

<div> 
<div>Content 
</div> 
</div> 
<div style="position:absolute;"> 
<div style="position:absolute;top:0px;">At top 
</div> 
</div> 

(고정없이 사용) 이전에 위치하는 절대 요소를 생략 할 수있는 방법이 있는가? 자바 스크립트 솔루션을 사용할 수 있습니다.

+0

'고정'을 시도하셨습니까? 이것은 항상 창을 참조 할 것입니다 ... – Pevara

+0

@PeterVR - 나는 깨닫는다. 그러나 문제가 발생할 수있는 창을 스크롤하는 동안 고정 된 위치를 유지한다. –

+0

'float'을 사용할 수 있습니다. 예 : http://jsfiddle.net/MSzZG/1/ –

답변

2

자연스러운 위치와 원하는 위치의 차이를 계산하여 절대적으로 창에 배치해야합니다.

jQuery를 사용하는 경우 .offset(coordinates) 함수를 사용하여 수학 연산을 수행 할 수 있습니다.

1

position: absolute div를 (상대방을 position: relative으로 지정해야하는) 창에 대해 상대적으로 배치하려면 중첩하지 않아야합니다.

position: absolute은 가장 큰 즉석 위치 부모 (position: absolute 또는 position: relative)와 관련하여 항상 배치됩니다. 이것을 무시할 수는 없습니다. HTML을보다 잘 구성하거나 CSS를 다르게 구현하기 만하면됩니다.

그래서 기본적으로 귀하의 질문에 대한 대답이 더 :(이 적어도 특별히 할 싶지 않다 언급 고정 위치를 사용하지 않고 없습니다.

2

대답

번호가 당신은 할 수 없습니다.

추론

당신은 당신이 완전히 떨어져 부모.이 내용은 "외로운"부모가되지 것 DIV 하나를 배치 할 수뿐만 아니라, 완전히. 중첩 DIV 태그를 중첩의 목적을 물리 칠 것을 할 수 있다면 나그 문제에 대한 태그는 단지 미용 목적으로 만 수행되는 것이 아닙니다. 그것은 텍스트 의미를 사용자에게 전하기 위해 수행됩니다.

귀하의 접근 방식을 재검토 해 보시기 바랍니다. 아마 당신이 최종 결과를 원하는대로 설명한다면, 우리는 당신을 도울 수 있습니다. 분명히 해결책이되어야합니다. 당신이 내부 사업부가 상단에 위치해야하는 경우

가능한 해결책

  • 는 그것을 한 단계를 꺼내.
  • 부모로부터 절대 위치 지정을 제거합니다.
  • 절대 위치 이외 다른 위치 지정 방법 사용.
관련 문제