HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS 튜토리얼

CSS 홈 CSS 소개 CSS 구문 CSS 선택기 CSS 방법 CSS 주석 CSS 색상
그림 물감 RGB 마녀 HSL
CSS 배경
배경색 배경 이미지 배경 반복 배경 첨부 배경 속기
CSS 테두리
테두리 테두리 너비 테두리 색상 테두리 측면 국경 속기 둥근 테두리
CSS 여백
여백 여백 축소
CSS 패딩 CSS 높이/너비 CSS 상자 모델 CSS 개요
개요 윤곽 너비 윤곽 색상 개요 속기 윤곽 오프셋
CSS 텍스트
텍스트 색상 텍스트 정렬 텍스트 장식 텍스트 변환 Text Spacing Text Shadow
CSS 글꼴
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS 아이콘 CSS 링크 CSS 목록 CSS 테이블
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS 디스플레이 CSS 최대 너비 CSS 위치 CSS Z-색인 CSS 오버플로 CSS 플로트
Float Clear Float Examples
CSS 인라인 블록 CSS 정렬 CSS 결합기 CSS 의사 클래스 CSS 의사 요소 CSS 불투명도 CSS 탐색 모음
Navbar Vertical Navbar Horizontal Navbar
CSS 드롭다운 CSS 이미지 갤러리 CSS 이미지 스프라이트 CSS 속성 선택기 CSS 양식 CSS 카운터 CSS 웹사이트 레이아웃 CSS 단위 CSS 특수성 CSS !중요 CSS 수학 함수

CSS 고급

CSS 둥근 모서리 CSS 테두리 이미지 CSS 배경 CSS 색상 CSS 색상 키워드 CSS 그라디언트
Linear Gradients Radial Gradients Conic Gradients
CSS 그림자
Shadow Effects Box Shadow
CSS 텍스트 효과 CSS 웹 글꼴 CSS 2D 변환 CSS 3D 변환 CSS 전환 CSS 애니메이션 CSS 도구 설명 CSS 스타일 이미지 CSS 이미지 반사 CSS 객체 맞춤 CSS 객체 위치 CSS 마스킹 CSS 버튼 CSS 페이지 매김 CSS 다중 열 CSS 사용자 인터페이스 CSS 변수
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS 상자 크기 조정 CSS 미디어 쿼리 CSS MQ 예 CSS 플렉스박스
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS 반응형

RWD 소개 RWD 뷰포트 RWD 그리드 보기 RWD 미디어 쿼리 RWD 이미지 RWD 비디오 RWD 프레임워크 RWD 템플릿

CSS 그리드

그리드 소개 그리드 컨테이너 그리드 항목

CSS SASS

SASS 튜토리얼

CSS 예제

CSS 템플릿 CSS 예제 CSS 퀴즈 CSS 연습 CSS 인증서

CSS 참조

CSS 참조 CSS 선택기 CSS 함수 CSS 참조 청각 CSS 웹 안전 글꼴 CSS 애니메이션 가능 CSS 단위 CSS PX-EM 변환기 CSS 색상 CSS 색상 값 CSS 기본값 CSS 브라우저 지원

CSS 레이아웃 - 위치 속성

❮ 이전의 다음 ❯

position속성은 요소에 사용되는 위치 지정 방법의 유형(정적, 상대, 고정, 절대 또는 고정)을 지정합니다 .

위치 속성

position속성은 요소에 사용되는 위치 지정 방법의 유형을 지정합니다 .

5가지 다른 위치 값이 있습니다.

  • static
  • relative
  • fixed
  • absolute
  • sticky

그런 다음 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 배치됩니다. position 그러나 이러한 속성은 속성을 먼저 설정 하지 않으면 작동하지 않습니다 . 또한 위치 값에 따라 다르게 작동합니다.

위치: 정적;

HTML 요소는 기본적으로 정적으로 배치됩니다.

정적 위치 요소는 top, bottom, left, right 속성의 영향을 받지 않습니다.

가 있는 요소 position: static;는 특별한 방식으로 배치되지 않습니다. 항상 페이지의 정상적인 흐름에 따라 배치됩니다.

이 <div> 요소는 position: static;

사용된 CSS는 다음과 같습니다.

예시

div.static {
  position: static;
  border: 3px solid #73AD21;
}

위치: 상대;

가 있는 요소 position: relative;는 정상 위치를 기준으로 배치됩니다.

상대적으로 배치된 요소의 top, right, bottom, left 속성을 설정하면 원래 위치에서 멀어지게 조정됩니다. 다른 콘텐츠는 요소에 의해 남겨진 간격에 맞게 조정되지 않습니다.

이 <div> 요소에는 위치가 있습니다. 상대;

사용된 CSS는 다음과 같습니다.

예시

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

위치: 고정;

가 있는 요소 position: fixed;는 뷰포트에 상대적으로 위치하므로 페이지를 스크롤하더라도 항상 같은 위치에 유지됩니다. top, right, bottom, left 속성은 요소의 위치를 ​​지정하는 데 사용됩니다.

고정 요소는 일반적으로 위치했을 페이지에 공백을 남기지 않습니다.

페이지의 오른쪽 하단 모서리에 있는 고정된 요소를 확인하십시오. 사용된 CSS는 다음과 같습니다.

예시

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
이 <div> 요소는position: fixed;

위치: 절대;

가 있는 요소 position: absolute;는 가장 가까운 위치에 있는 조상을 기준으로 배치됩니다(고정처럼 뷰포트에 상대적으로 배치되는 대신).

하지만; 절대 위치 요소에 위치 지정 상위 요소가 없으면 문서 본문을 사용하고 페이지 스크롤과 함께 이동합니다.

참고: 절대 위치 요소는 일반 흐름에서 제거되며 요소와 겹칠 수 있습니다.

다음은 간단한 예입니다.

이 <div> 요소에는 위치가 있습니다. 상대;
이 <div> 요소에는 위치가 있습니다. 절대;

사용된 CSS는 다음과 같습니다.

예시

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

위치: 끈끈한;

가 있는 요소 position: sticky;는 사용자의 스크롤 위치를 기준으로 배치됩니다.

고정 요소 는 스크롤 위치에 따라 relative및 사이를 전환합니다. fixed주어진 오프셋 위치가 뷰포트에서 만날 때까지 상대적으로 배치된 다음 제자리에 "고정"됩니다(예: position:fixed).

참고: Internet Explorer는 고정 위치 지정을 지원하지 않습니다. Safari에는 -webkit- 접두사가 필요합니다(아래 예 참조). 또한 고정 위치 지정이 작동하려면 top, 또는 right중 하나 이상을 지정해야 합니다 .bottomleft

top: 0이 예에서 고정 요소 는 스크롤 위치에 도달하면 페이지 상단( )에 고정됩니다.

예시

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

이미지에서 텍스트 위치 지정

이미지 위에 텍스트를 배치하는 방법:

예시

Cinque Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

직접 사용해 보세요:

더 많은 예


This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.

Test Yourself With Exercises

Exercise:

Position the <h1> element to always be 50px from the top, and 10px from the right, relative to the window/frame edges.

<style>
h1 {
  : ;
  : 50px;
  : 10px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

All CSS Positioning Properties

Property Description
bottom Sets the bottom margin edge for a positioned box
clip Clips an absolutely positioned element
left Sets the left margin edge for a positioned box
position Specifies the type of positioning for an element
right Sets the right margin edge for a positioned box
top Sets the top margin edge for a positioned box

❮ Previous Next ❯