고정 위치 지정과 고정 위치 지정을 구별하세요.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

고정 위치 지정과 고정 위치 지정을 구별하세요.

王林

Feb 18, 2024 pm 10:42 PM

위치 속성 고정 위치 끈끈한 포지셔닝

고정 위치 지정과 고정 위치 지정을 구별하세요.

고정 위치 지정과 고정 위치 지정은 웹 디자인 및 개발에서 일반적으로 사용되는 두 가지 위치 지정 방법입니다. 둘 다 페이지의 특정 위치에 요소를 고정할 수 있지만 방법은 다릅니다. 이 글에서는 고정 위치 지정과 고정 위치 지정의 차이점을 자세히 소개하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다.

고정 위치 지정:
고정 위치 지정은 스크롤할 때 요소가 페이지의 특정 위치에 고정될 수 있음을 의미합니다. 스크롤 위치가 지정된 위치에 도달하면 요소가 스크롤을 중지하고 페이지에 고정됩니다. 고정 위치 지정은 문서 흐름을 기준으로 합니다. 일반적인 문서 흐름 레이아웃에서는 스크롤에 따라 요소의 위치가 변경됩니다. 고정 위치 지정에서는 요소의 위치가 위쪽, 아래쪽, 왼쪽, 오른쪽과 같은 속성에 의해 결정됩니다.

다음은 페이지 상단으로 스크롤할 때 네비게이션 바가 페이지 상단에 고정되는 효과를 구현한 간단한 샘플 코드입니다.

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7416

Cakephp 튜토리얼

1359

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

고정 위치 지정이 문서 흐름에서 벗어나나요? Feb 20, 2024 pm 05:24 PM

고정 위치 지정이 문서 흐름에서 벗어나나요? 웹 개발에서 레이아웃은 매우 중요한 주제입니다. 그 중 포지셔닝(Positioning)은 일반적으로 사용되는 레이아웃 기술 중 하나입니다. CSS에는 정적 위치 지정, 상대 위치 지정, 절대 위치 지정이라는 세 가지 일반적인 위치 지정 방법이 있습니다. 이 세 가지 위치 지정 방법 외에도 더 특별한 위치 지정 방법, 즉 끈적한 위치 지정이 있습니다. 그렇다면 고정 위치 지정이 문서 흐름에서 벗어나나요? 아래에서 자세히 논의하고 이해를 돕기 위해 몇 가지 코드 예제를 제공하겠습니다. 먼저 문서 흐름이 무엇인지 이해해야 합니다.

잘못 정렬된 디스플레이를 방지하기 위해 WordPress 테마를 조정하는 방법 Mar 05, 2024 pm 02:03 PM

잘못 정렬된 표시를 방지하기 위해 WordPress 테마를 조정하려면 특정 코드 예제가 필요합니다. 강력한 CMS 시스템인 WordPress는 많은 웹사이트 개발자와 웹마스터에게 사랑을 받고 있습니다. 그러나 WordPress를 사용하여 웹 사이트를 만들 때 사용자 경험과 페이지 아름다움에 영향을 미치는 테마 정렬 문제가 자주 발생합니다. 따라서 잘못 정렬된 표시를 방지하려면 WordPress 테마를 적절하게 조정하는 것이 매우 중요합니다. 이번 글에서는 구체적인 코드 예시를 통해 테마를 조정하는 방법을 소개하겠습니다.

CSS에서 요소를 배치하는 방법 Apr 26, 2024 am 10:24 AM

CSS 요소 위치 지정에는 정적, 상대, 절대 및 고정 위치 지정의 네 가지 방법이 있습니다. 정적 위치 지정이 기본값이며 요소는 위치 지정 규칙의 영향을 받지 않습니다. 상대 위치 지정은 문서 흐름에 영향을 주지 않고 요소 자체를 기준으로 요소를 이동합니다. 절대 위치 지정은 문서 흐름에서 요소를 제거하고 상위 요소를 기준으로 위치를 지정합니다. 고정 위치 지정은 뷰포트를 기준으로 요소의 위치를 지정하여 항상 화면의 동일한 위치를 유지합니다.

CSS 고정 위치 지정이란 무엇입니까? Oct 25, 2023 pm 05:06 PM

CSS의 고정 위치 지정은 요소의 "위치" 속성을 "고정"으로 설정하여 구현되는 레이아웃 기술입니다. 고정 위치 요소는 상위 요소나 다른 요소를 기준으로 하는 것이 아니라 뷰포트를 기준으로 위치를 지정합니다. 이는 사용자가 페이지를 어떻게 스크롤하더라도 고정된 위치의 요소가 뷰포트의 고정된 위치에 유지된다는 의미입니다. 고정 위치 지정에는 호환성, 모바일 장치, 성능 영향 등에 주의가 필요합니다. 고정 위치 지정은 탐색 모음, 광고 배너, 맨 위로 돌아가기 버튼, 부동 도구 모음과 같은 시나리오에서 널리 사용됩니다.

레이아웃 레이아웃이란 무엇입니까? Feb 24, 2024 pm 03:03 PM

레이아웃은 특정 규칙과 구조에 따라 웹 페이지 요소를 배열하고 표시하기 위해 웹 디자인에 채택된 조판 방법을 말합니다. 합리적인 레이아웃을 통해 웹페이지를 더욱 아름답고 깔끔하게 만들 수 있으며, 좋은 사용자 경험을 얻을 수 있습니다. 프런트엔드 개발에는 전통적인 테이블 레이아웃, 플로팅 레이아웃, 위치 지정 레이아웃 등 선택할 수 있는 레이아웃 방법이 많이 있습니다. 그러나 HTML5와 CSS3의 보급으로 Flexbox 레이아웃, Grid 레이아웃과 같은 최신 반응형 레이아웃 기술이 등장했습니다.

끈끈한 포지셔닝의 비결: 어떤 특징이 사용자의 관심을 끌 수 있을까요? Feb 02, 2024 pm 01:17 PM

고정 포지셔닝의 특징을 살펴보세요. 이것이 사용자의 관심을 끄는 이유는 무엇입니까? 소개: 오늘날 모바일 장치의 인기로 인해 사람들은 웹 디자인과 사용자 경험에 대한 요구 사항이 더욱 높아졌습니다. 웹 디자인에서는 어떻게 사용자의 관심을 끌고 친근한 사용자 경험을 제공하는가가 중요한 요소입니다. Sticky Positioning 또는 StickyPositioning이 등장하여 페이지의 요소 위치를 고정하여 사용자에게 보다 편리한 탐색 및 상호 작용을 제공합니다. 이 기사에서는 고정 위치 지정의 특성을 살펴보고 특정 코드 구현을 제공합니다.

CSS의 background-position 속성 사용에 대한 자세한 설명 Feb 19, 2024 pm 10:13 PM

CSS에서 background-position 사용법이 자세히 설명되어 있습니다. CSS에서는 background-position 속성을 사용하여 요소 내 배경 이미지의 위치를 설정합니다. 이 속성은 배경 이미지가 나타나는 위치를 정확하게 제어할 수 있기 때문에 매우 유용합니다. 다음에서는 background-position의 사용법을 자세히 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. 구문: background-position 속성의 구문은 다음과 같습니다.