CSS / 위치 고정 시키기 fixed 겹침 우선순위 z-index

웹 페이지를 만들 때 어떤 거는 위치를 고정시키고 싶은 게 나올 수 있습니다.

가령 메뉴 같은 거는 위치를 고정시켜 스크롤을 내려도 있게 하는 등으로요.

이때 css를 통해서 위치를 고정시키는 방법이 있습니다.

 

먼저 순서는

fixed를 이용하는 방법과

z-index 순서대로 쓰도록 하겠습니다.

(색깔로 구분 지어놓겠습니다.)

 

간단하게 고정시키고 싶은 것을 css에서

position: fixed를 주면 되는데요.

 

예를 들어 메뉴를 고정시키고 싶은데

아무 조건이 없다면 다음과 같이 스크롤을 내리면

메뉴가 스크롤 된만큼 사라지는 것을 볼 수 있습니다.

 

 

 

이걸 간단하게

 

 

1. position: fixed

 

를 이용해서 할 수 있습니다. css 코드는 아래와 같습니다.

.menu{
    position: fixed;
    top:0;
    left:0;
    height: 80px;
    width: 100%;
    background-color: gray;
    
}

.test{
    height: 1500px;
}

 

 

이렇게 스크롤을 내려도 고정되어 있는 모습을 확인할 수 있습니다.

 

 

 

2. z-index

다음은 fixed와 그 외에 포지션과 같이 사용할 때입니다.

 

예를 든 상황으로는 각 각 일정한 크기의 div를 선언한

상태로 초기 상태는 아래 그림과 같습니다.

 

이후 position을 absolute를 준다음

각 각 left를 통해 크기를 변경해보면

 

 위 그림처럼 나오게 되는데요.

여기서 가운데 노란색을 나오게 하고 싶다

그렇다면 다른 두 div 보다 z-index를 주시면 됩니다.

숫자가 클수록 더 우선순위가 높은 것으로,

주의할 점은 px나 다른 단위를 붙이시면 안 됩니다.

 

일단 html 코드와 css 코드입니다.

 

html

<div class="A hei"></div>
<div class="B hei"></div>
<div class="C hei"></div>

 

 

혹시라도 해보고 싶으시다면 body 태그 안으로 위 3 div를 넣어주시면 됩니다.

 

 

css

.hei{
    height: 200px;
    width: 100px;
    float: left;
    
}

.A{
    position: absolute;
    left: 20px;
    z-index: 20;
    display: inline;
    background:red;
}

.B{
    left: 50px;
    position: absolute;
    z-index: 40;
    background-color: yellow;
}

.C{
    position: absolute;
    left: 100px;
    z-index: 30;
    background: green;
}

 

저는 가운데 div 노란색을 가장 앞으로 나오게 하고 싶어서 가장 높게 설정해주었습니다.

 

그럼 이렇게 노란색이 가장 크게 나오게 되죠.

 

 

원래 메뉴를 고정시키고 반응형으로 만들다 보니 상대적으로 포지션을 주었던 것 때문에

문제가 발생하다가 이렇게 알아보고 하게 되었습니다.

저는 메뉴를 fixed로 주고 그 아래 콘텐츠를 relative로 주었었는데요.

생각한 것처럼 하려다 보니 z-index를 사용해서 해결이 되었습니다.

저도 공부하는 입장이라 아직 부족하고 잘못한 코드가 있다면

댓글로 남겨주시면 감사하겠습니다.