섹션 영역이 제자리에 있지 않고 유동적입니다. 어떻게 하면 고정시킬 수 있을까요?

Question

섹션 블록을 만들었는데 위치 고정이 되지 않고 이리저리 움직입니다. 헤더안쪽을 침범하기도 하고요. 개인적 생각으로는 헤더쪽이랑 분리가 안되어서 발생하는 현상 같은데 어떻게 분리해야 하는지 잘 모르겠습니다. 어떻게 해야 할까요?

안녕하세요, 저는 '이석범'이라고 합니다

저는 웹퍼블리셔를 지망하고 있습니다

부족한 점이 많지만 최선을 다해 만들었으니 열심히 들러봐주세요!

dddd

body{ margin:0; font-family: 'Source Sans Pro', sans-serif; } #wrap{ width:100%; margin:0 auto; } a { text-decoration: none; color:white; } header{ width:100%; height:100px; background-color:rgb(172, 161, 163); } .navbar{ display:flex; justify-content: space-between; align-items: center; padding:18px 12px; } .navbar .nav_logo img{ width:110px; } .nav_menu { display:flex; list-style:none; padding-left:0px; } .nav_menu li{ padding:8px 12px; margin-top:10px; } a:hover{ color: #D14E63; transition: 0.2s ease-in; } .nav_sns i{ font-size:20px; color:white; padding:5px 05px; margin-top:08px; } .navbar_togleBtn{ display:none; } .slide-container { width: 300vw; transition: all 1s; margin:0; padding:0; } .slide-box { width: 100vw; float: left; background-size: cover; position: relative; } .slide-box img { width: 100%; } .text { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:5rem; z-index: 1; font-size:40px } .left{ position:absolute; top:50%; left:15%; transform: translate(-50%, -50%); z-index: 1; font-size:30px; } .right{ position:absolute; top:50%; right:15%; transform: translate(-50%, -50%); z-index: 1; font-size: 30px; } .hope{ color:rgb(230, 116, 116); } .export{ color: green; } .test{ position: relative; width:100%; height:100px; top:280px; transform: translate(0%, 50%); border:1px solid red; }

가보자잇잇 · Answer

flex쪽을 찾아보세요 아마 위치 고정하는게 나올 겁니다. flex:none 라던지..?

doru · Answer

일단 header에 height가 100px로 고정되어있습니다..

doru · Answer

그리고 header안에 nav와 슬라이드가 둘다 들어가있으니 당연히 겹치죠.header는 100px로 고정인데 그 안에 내용물들이 더 있으니...100px를 header에 주실게 아니라 nav에 주셔야하는게 아닌가합니다. background-color도요..

범호 · Answer

도루님 말씀처럼 heigh:100px을 지우니 해결이 됐습니다. 두 분다 알려주셔서 감사합니다.

섹션 영역이 제자리에 있지 않고 유동적입니다. 어떻게 하면 고정시킬 수 있을까요?

4개의 답변

#section 목록