fixed된 헤더(header)가 형제 요소의 margin에 영향을 받는 이유

position : fixed가 적용된 대상이 top:0 left:0 같이 명시적인 위치가 정해지지 않았을때 형제 요소의 margin에 영향을 받는 경우가 있다.

 

headercontainer01와  continer-header-under는 형제요소이다. 그런데 아래와 같은 상황에서는 형제 요소의 margin만큼 아래로 밀려버린다.

css

클릭하여 코드 펼치기

#container-header-under{
margin-top: 50px;
}

#headercontainer01{
position: fixed;
}
클릭하여 코드 복사

1. 원인: #headercontainer01가 문서의 원래 위치를 유지하려 하기 때문

• position: fixed;를 적용하면 요소는 문서의 일반적인 흐름에서 제거되지만, 원래 위치(문서 내에서 배치되던 자리)를 기준으로 배치되려는 성질이 있습니다.
• top을 명시적으로 설정하지 않으면, 원래 있던 자리에서 배치되려 하고, 이때 형제 요소의 margin-top: 50px;이 적용된 상태에서 계산이 되므로 밀려나는 것입니다.

---

2. 🔹 자세한 동작 과정:

1. #headercontainer01에 position: fixed;를 적용하면 일반적인 문서 흐름에서 제거됨.
2. 하지만 원래 있던 자리에서 배치되려는 성질이 있어서 top이 없으면 초기 위치를 유지하려 함.
3. #container-header-under에 margin-top: 50px;이 있어서 문서에서 원래 #headercontainer01가 있던 자리가 아래로 내려감.
4. 결과적으로 #headercontainer01도 문서에서 원래 위치를 유지하려 하다가 50px 만큼 밀려남.

 

 

• 정적 위치(Static Position)의 영향: CSS 명세에 따르면, fixed 요소에 top/bottom 값이 없으면 브라우저는 해당 요소가 원래 문서 흐름 상 어디에 위치했을지(정적 위치) 를 계산하여 뷰포트 기준으로 초기 위치를 잡으려고 시도할 수 있습니다.

 

대강 말하자면 기존에 존재해야하는 위치를 잡으려고 해서 그렇다는 것이다.