fixed 하면 영역 분할이 안되고 겹쳐서 나와요 ㅠㅠ

[권재현]

그다음 코드 입니다.

 

--상단 바 메뉴--

<div class="nav-menu">
   
    <h4 style="margin: 0;">Shirts Studio</h4>
    <a id="nav-sub-button">Products</a>
</div>

<ul class="list-group nav-sub">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
</ul>

--점보트론--
<div class="jumbotron main-background">
    <h1 class="display-4" >Shirt Studio</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <a id="login" class="btn btn-primary btn-lg" href="#" role="button">Log In</a>
    <a id="show-menu" class="btn btn-danger btn-lg" href="#" role="button">show Menu</a>
    <button class="k"> 권재현</button>
</div>

CSS

.nav-menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    padding:15px;
    position: fixed;
    z-index: 5;
    width: 100%;
    margin-bottom: 200px;
}

.main-background{

    background-image: url(산티아고.jpg) ;
    background-size: cover;
    color: white;
    border-radius: 0px;
}

 

fixed속성 하면 겹쳐서 나와요ㅠㅠ

[codingapple]

원래 fixed 하면 공중에 띄워서 상단 고정해주세요 라는 뜻이기 때문에 저게 맞습니다

색만 하얗게 바꾸고

밑에있는 큰 박스에 margin-top 이런거 주면 분할된 느낌 납니다 

[글쓴이]

글