Navbar Fixed 가 되지 않는데 ...

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

글쓴이

글

2023년 9월 18일 18:08 #98401

참가자

 
 navbar 클래스에 fixed를 적용했는데 div와 nav의 위치를 바꿔도 적용이 되지않는데.. 
왜 적용이 되지 않는건지 알수있을까요..?

//html
  <body>
      <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
          class="background-container"
          style="height: 1000px; width: 100%; background-color: beige"
        >
          <div class="popup-bg"></div>
        </div>
       
      </nav>
    </div>
  </body>

.navbar {
  position: fixed;
  width: 100%;
  z-index: 5;
}
//css

.navbar {
  position: fixed;
  width: 100%;
  z-index: 5;
}

.popup-bg {
  height: 500px;
  width: 90%;
  border-radius: 10px;
  background-color: rgba(157, 190, 190, 0.534);
}/*# sourceMappingURL=css.css.map */

2023년 9월 18일 19:37 #98411

codingapple

키 마스터

끝나는 </div>가 하나 더 있는듯요

2023년 9월 18일 19:52 #98414

슈뽀람

참가자

그래도 문제가 해결이 되지않는데 혹시 fiexd 사용하려면 큰 div박스를 밖에 만들어 줘야하거나 그런 조건같은게 있을까요
코드는 다음과 같이 수정하였습니다. 그래도 같은 문제가 생기네요 ㅜ 상단메뉴가 따라오지 않아요..
  <body>
    <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <span class="navbar-brand">Navbar</span>
        <button class="navbar-toggler" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="background-container" style="height: 1000px; width: 100%; background-color: beige">
        <div class="popup-bg"></div>
      </div>
    </nav>
  </body>

.navbar {
  position: fixed;
  z-index: 5;
  height: 50px;
  width: 100%;
  background-color: black;
  color: white;
}
.popup-bg {
  height: 2000px;
  width: 100%;
  border-radius: 10px;
 background-color: rgba(157, 190, 190, 0.534);
}

2023년 9월 19일 09:16 #98464

codingapple

키 마스터

fixed만 주면 잘됩니다 <div class="background-container"> 는 nav 바깥으로 빼봅시다

글쓴이

글

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

답변은 로그인 후 가능합니다.

로그인

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png