고정 위치 지정과 고정 위치 지정을 구별하세요.
- 王林원래의
- 2024-02-18 22:42:22648검색
고정 위치 지정과 고정 위치 지정은 웹 디자인 및 개발에서 일반적으로 사용되는 두 가지 위치 지정 방법입니다. 둘 다 페이지의 특정 위치에 요소를 고정할 수 있지만 방법은 다릅니다. 이 글에서는 고정 위치 지정과 고정 위치 지정의 차이점을 자세히 소개하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다.
- 고정 위치 지정:
고정 위치 지정은 스크롤할 때 요소가 페이지의 특정 위치에 고정될 수 있음을 의미합니다. 스크롤 위치가 지정된 위치에 도달하면 요소가 스크롤을 중지하고 페이지에 고정됩니다. 고정 위치 지정은 문서 흐름을 기준으로 합니다. 일반적인 문서 흐름 레이아웃에서는 스크롤에 따라 요소의 위치가 변경됩니다. 고정 위치 지정에서는 요소의 위치가 위쪽, 아래쪽, 왼쪽, 오른쪽과 같은 속성에 의해 결정됩니다.
다음은 페이지 상단으로 스크롤할 때 네비게이션 바가 페이지 상단에 고정되는 효과를 구현한 간단한 샘플 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
position: sticky;
top: 0;
background-color: #f1f1f1;
padding: 10px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div style="height:500px">
<p>Scroll down to see the effect</p>
</div>
</body>
</html>위 코드에서 navbar를 고정으로 설정하고 top을 0으로 설정하면 스크롤할 때 탐색 모음이 페이지 상단에 고정되는 효과를 얻습니다.
- 고정 위치 지정:
고정 위치 지정은 요소가 브라우저 창을 기준으로 특정 위치에 고정되어 있으며 스크롤 여부에 관계없이 요소 위치가 변경되지 않음을 의미합니다. 고정 위치 지정에서는 요소의 위치가 위쪽, 아래쪽, 왼쪽, 오른쪽과 같은 속성에 의해 결정됩니다.
다음은 페이지 오른쪽 하단에 위치가 고정된 플로팅 버튼 효과를 구현한 간단한 샘플 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.float-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #f44336;
color: white;
padding: 16px;
border-radius: 50%;
font-size: 24px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="float-button">+</div>
</body>
</html>위 코드에서 float-button의 위치 속성을 고정으로 설정하고 하단을 20px 로 설정하고 오른쪽은 20px로 설정하여 페이지 오른쪽 하단에 플로팅 버튼이 고정되는 효과를 얻습니다.
요약:
끈적 위치 지정과 고정 위치 지정 모두 요소의 고정 효과를 얻을 수 있지만 방법과 효과는 다릅니다. 고정 위치 지정은 지정된 위치로 스크롤할 때 요소가 페이지에 고정되는 위치 지정 방법입니다. 고정 위치 지정은 브라우저 창을 기준으로 하는 위치 지정 방법입니다. 스크롤 여부. 특정 요구에 따라 적절한 위치 지정 방법을 선택할 수 있습니다.
위 내용은 고정 위치 지정과 고정 위치 지정을 구별하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!