[HTML] 왜 내가 그것을 설정할 때 아래로 내 헤더 움직임은 고정 된 무엇입니까?
HTML왜 내가 그것을 설정할 때 아래로 내 헤더 움직임은 고정 된 무엇입니까?
해결법
-
1.당신은 마진 축소 문제에 직면하고있다. 고정 된 헤더를 한 후, 당신은 흐름에서 제거하고 형태는 첫째의 흐름 요소 따라서 상단 여백이 body1의 상단 이익률 collpase 것이다된다. 몸이 큰 가기 마진을해야합니다 당신의 고정 요소는 어떤 최고 값 2를 설정하지 않았기 때문에 몸을 고려하여 배치 될 것이라고이 평균.
당신은 마진 축소 문제에 직면하고있다. 고정 된 헤더를 한 후, 당신은 흐름에서 제거하고 형태는 첫째의 흐름 요소 따라서 상단 여백이 body1의 상단 이익률 collpase 것이다된다. 몸이 큰 가기 마진을해야합니다 당신의 고정 요소는 어떤 최고 값 2를 설정하지 않았기 때문에 몸을 고려하여 배치 될 것이라고이 평균.
이를 방지하기 위해 당신은 단순히 당신이 원하는 요소를 이동하지 않도록 마진 붕괴 (I 다른 문제를 방지하기 위해 권장되는) 또는 셋톱 값이 필요합니다.
@import "https://fonts.googleapis.com/css?family=Permanent+Marker|Work+Sans|Oswald|Baloo+Bhaijaan|Roboto"; 신체 { 패딩 탑 : 1 x 1 픽셀; / * 비활성화 마진 collpasing * / } #머리글{ 배경 색상 : # 191919; 높이 : 3rem; 폭 : 100 %; 위치 : 고정; } # 헤더 IMG { 글꼴 - 가족 : '영구 마커', 필기체; 색상 : 흰색; 마진 왼쪽 : 1.5rem을; 왼쪽으로 뜨다; 폰트 크기 : 25 픽셀; } UL { 목록 스타일 : 없음; 표시 : 플렉스; 흐름 방향을 : 행; 정당화-내용 : 공간의 주위를; } # 탐색 바 { 배경 색상 : # 191919; 왼쪽으로 뜨다; 폭 : 100 %; } #형태{ 여백 - 가기 : 45rem; 마진 왼쪽 : 25 %; 마진 오른쪽 : 25 %; } IMG { 폭 : 70 %; 신장 : 70 %; } ㅏ { 텍스트 장식 : 없음; 글꼴 - 가족 : '직장 산세', 필기체; 색상 : 흰색; 폰트 크기 : 12 픽셀; } #이메일{ 폭 : 100 %; 상자 그림자 : 3px의 3px의 5px 회색; } # 제출 { 글꼴 - 가족 : 'Roboto로', 필기체; 폰트 사이즈 : 14px; 폰트 중량 : 굵은; 색상 : # 686868; 상자 그림자 : 3px의 3px의 5px 회색; 패딩 : 5px 5px; } .목록{ 마진 왼쪽 : 10 %; 마진 오른쪽 : 10 %; 여백 - 가기 : 5rem; 폭 : 90 %; 왼쪽으로 뜨다; } #암호{ 폭 : 100 %; 상자 그림자 : 3px의 3px의 5px 회색; } #비디오{ 여백 - 가기 : 5rem; 마진 왼쪽 : 25 %; 마진 오른쪽 : 25 %; 폭 : 50 %; } #과정{ 표시 : 플렉스; 흐름 방향을 : 행; 플렉스 랩 : 랩; } #기술{ 글꼴 - 가족 : '오스왈드', 필기체; 폰트 크기 : 20 픽셀; 텍스트 정렬 : 센터; 폰트 사이즈 : 16px; } 리 { 패딩 : .25rem .5rem; } A : 가져가 { 색상 : # 4ba0c8; } .nav 링크 { } .course 라벨 { 글꼴 - 가족 : 'Baloo Bhaijaan', 필기체; 폰트 사이즈 : 18px; } .images { 이익률 5 % 5 %; 패딩 : 3 % 3 %; 폭 : 10vw; 높이 : 10vw; 색상 : # d2d2d2; } .images : 가져가 { 배경 색상 : # 99d3ff; 색상 : # 99d3ff; } @media (최소 폭 : 555 픽셀) { # 탐색 바 { 플로트 : 오른쪽; 폭 : 20rem; 마진 오른쪽 : 1rem; } #형태{ 여백 - 가기 : 5rem; } } @media (최소 폭 : 360 픽셀) { ㅏ{ 폰트 사이즈 : 16px; } #기술{ 폰트 크기 : 20 픽셀; } # 헤더 IMG { 폰트 크기 : 30 픽셀; } #머리글{ 높이 : 4.5rem; } } <헤더 ID = "헤더">
CodeXpert를