z-index가 작동되지 않을 때

 

하고자 했던 것 : 

 

프로젝트의 html과 css레이아웃을 짜던 중,

상단에 배치한 header와 좌측에 배치한 aside 태그에 각각 메뉴를 넣고 position을 fixed로 지정하였고, 

 

해당 공간을 제외한 나머지 공간에 contents들을 위치 시켜 고정된 메뉴들과 내용들이 동시에 잘 보이도록 하고싶었다.

 

 

문제상황 : 

 

고정된 상단과 좌측의 메뉴들이 아래로 위치하게 되어 hover효과가 나타나지 않았다. 

그러나 z-index를 사용하려고 했더니 header와 aside는 fixed로 포지션이 static하였기 때문에 

z-index는 반영되지 않는다고 했다. 

 

 

 

App.jsx 

 

function App() {
  return (
    <>
      <Layout />
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </>
  );
}

 

고치기 전 Layout.jsx 

const Layout = () => {
  return (
    <>
        <header className="fixed head">
          <Util />
        </header>
        <aside className="aside fixed">
          <div className="aside__logo-wrapper">
            <Logo />
          </div>
          <div className="nav__wrapper">
            <Nav />
            <UtilNav />
          </div>
        </aside>
    </>
  );
};

 

Home.jsx 

 

 

const Home = () => {
  return (
    <section className="contents">
      <article className="slider">
        <Slider />
      </article>
    </section>
  );
};

 

 

문제 발생 이유 : 

Layout과 Home 컴포넌트는 형제 태그였고,

Home 컴포넌트의 최상위 태그

.contents의 포지션은  relative였다. 

Layout의 header와 aside태그의 포지션은 fixed였다.

 

fixed된 Layout컴포넌트의 header와 aside에 z-index를 높여주면 상단에 위치할 것이라고 생각했지만 

어쩐 일인지 static값에는 z-index가 주어지질 않았다.

(그런데 현재 다시 해보니 되었다! 나중에 밝혀봐야겠다...)

 

 

 

 

 

문제 해결

 

z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)

 

위의 글을 읽고 난뒤 

position값이 relative인 .contents의 위로

position값이 fixed인 .head와 .aside를 놓으려면 

z-index를 높여주면 된다고 했으므로, 

 

Layout컴포넌트의 최상단을 감싸는 div태그 layout__wrapper클래스를 추가해주고,

position relative, z-index를 높여주어 포지션을 최상위에 위치하도록 하여 주었다. 

 

그랬더니 fixed된 메뉴들의 hover효과는 모두 정상작동 되었다.

 

 

const Layout = () => {
  return (
    <div className="layout__wrapper"> //해당 태그와 클래스 추가 
      <header className="fixed head">
        <Util />
      </header>
      <aside className="aside fixed">
        <div className="aside__logo-wrapper">
          <Logo />
        </div>
        <div className="nav__wrapper">
          <Nav />
          <UtilNav />
        </div>
      </aside>
    </div> //추가
  );
};

 

 

//추가된 클래스
.layout {
  &__wrapper {
    position: relative;
    z-index: 100;
  }
}

 

위에서 말했던 대로 .head와 .aside에 z-index를 각각 높여주니 최상단으로 정상 작동되었으나, 

해당 우선순위를 div태그에 준 layout__wrapper클래스로 따로 관리해주는 것이

추후 우선순위를 여타 태그들과 조정할 때에도 편리할 것 같아

해당방법으로 그대로 반영하였다 !!