반응형
fixed는 position 속성이 가지는 값 중에 하나입니다. 일반적으로 모든 요소는 요소의 흐름을 따라 코드가 설치된 순서대로 표시가 되는데요. fixed는 이러한 흐름에서 벗어나서 원하는 위치에 해당 요소를 위치시키도록 해줍니다.
사용방법
먼저, 관련된 속성들을 보겠습니다.
- top: root 상단으로 부터의 거리
- bottom: root의 바닥으로부터의 거리
- left: root의 좌측으로부터의 거리
- right: root의 우측으로부터의 거리
<!DOCTYPE html>
<html>
<head>
<title>Fixed</title>
</head>
<body>
<div style="height:3000px; width:100%; background-color:#efefef;">
<p style="font-size:5rem; position:fixed; top: 0; right: 6px;">Fixed</p>
</div>
</body>
</html>
fixed와 absolute 차이점은 fixed는 부모요소의 설정과 관계없이 무조건 windoe (screen)로부터 산정됩니다. 이러한 특성으로 콘텐츠의 길이와 상관없이 항상 화면에 같은 자리에 위치하여 내비게이션이나 모달 등에 유용하게 사용됩니다.
마무리
이상으로 CSS position fixed에 대해서 알아보았습니다.
참고
CSS Layout - The position Property
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
728x90
반응형
