재 위치 햄버거 메뉴 CSS

Question

안녕하세요 내가 햄버거 메뉴가 페이지의 왼쪽 상단에 고정되도록 설정되어있는 CSS에서 여기 --->http://callmenick.com/_development/material-menu/

있어 HTML5 버전 오프 캔버스 메뉴를 사용하고 있습니다. 나는 그것을 바꿔 놓고 내가 원하는 곳마다 햄버거 메뉴를 배치하고 싶다.

이제 고정 위치와 절대 위치를 제거하려고했지만 햄버거 아이콘이 축소되어 3 개 대신 한 줄로 표시되었습니다.

다음은 내가 고치려고하는 부분의 html입니다.

.mm-menu-toggle { 
position: fixed; 
top: 12px; 
left: 12px; 
z-index: 20; 
width: 24px; 
height: 18px; 
background: -webkit-linear-gradient(90deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); 
background: linear-gradient(0deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); 
font-size: 0; 

} 

.mm-menu-toggle::before, 
.mm-menu-toggle::after { 
position: absolute; 
left: 0; 
width: 100%; 
height: 4px; 
background-color: #212121; 
content: ""; 
} 

어디에서나 내가 원하는대로 메뉴를 배치 할 수있는 방법에 대해 알 수있는 사람이 있습니까?

링크로 이동하면 메뉴의 모든 파일과 CSS가있는 github 링크가 있습니다.

다음은 내가 말하는 의미의 이미지입니다. 상단은 메뉴의 모양입니다. 그러나 내가 position:fixed;과 position:absolute;을 css에서 가져 왔을 때 아래 그림이 주어진 것입니다.

어떻게 해결할 수 있습니까?

Answer 1

당신은

.mm-menu-toggle { 
    position: absolute; 
} 

대신

할 .mm-menu-toggle의

.mm-menu-toggle { 
    position: fixed; 
} 

Answer 2

Position: fixed는 스크롤 할 때조차 창을 다음 있도록 특정 위치에있는 페이지에 고정 문서의 흐름에서 요소를합니다. position 속성 값을 변경하면 원하는대로 위치를 변경할 수 있습니다.

Position 세트 absolute에 문서의 흐름에서 요소를 꺼내 당신이 등 top, left, bottom, right 같은 요소는 그러나 페이지에 지정된 위치에 남아있을 것입니다 속성을 사용하여 위치하게하고 사용자의 화면을 따르지 않습니다 것 스크롤 할 때.

Position을 relative으로 설정하면 요소가 문서의 흐름에 다시 추가되어 HTML 요소 뒤나 앞에 HTML 요소가 나타나기도하고 문서를 스크롤 할 때 사용자의 화면을 따르지 않게됩니다. 그런 다음 대부분의 HTML 요소처럼 float을 사용하여 위치를 변경할 수 있습니다.

예 (position: absolute)

.mm-menu-toggle { 
    position: absolute; 
    right: 10px; 
    top: 20px; 
} 

예 (position: relative)

.mm-menu-toggle { 
    position: relative; 
    float: right; 
    margin-top: 20px; 
}