정의 및 사용법
위치 속성은 요소의 위치 지정 유형을 지정합니다.
설명
이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다.
| 默认值： | static |
|---|---|
| 继承性： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.position="absolute" |
예
h2 요소 배치:
h2
{
position:absolute;
left:100px;
top:150px;
}
TIY
브라우저 지원
모든 주요 브라우저는 위치 속성을 지원합니다.
참고: 속성 값 "inherit"는 모든 버전의 Internet Explorer(IE8 포함)에서 지원되지 않습니다.
가능한 값
TIY 예시
<테이블 클래스="데이터 입력 가능"> <본체>
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
정상 위치를 기준으로 상대적으로 배치된 요소를 생성합니다.
따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.
위치 지정: 상대 위치 지정 이 예에서는 일반 위치를 기준으로 요소의 위치를 지정하는 방법을 보여줍니다. 위치 지정: 절대 위치 지정 이 예에서는 절대 값을 사용하여 요소의 위치를 지정하는 방법을 보여줍니다. 위치 지정: 고정 위치 지정 이 예에서는 브라우저 창을 기준으로 요소의 위치를 지정하는 방법을 보여줍니다. 요소의 모양 설정 이 예에서는 요소의 모양을 설정하는 방법을 보여줍니다. 요소가 모양에 잘려 표시됩니다. Z-indexZ-index는 한 요소를 다른 요소 뒤에 배치하는 데 사용할 수 있습니다. Z-색인 위 예의 요소는 Z-색인이 변경되었습니다.
CSS의 Position 속성을 소개하겠습니다
CSS 위치는 매우 중요하며 정적, 상대, 절대, 고정 값을 갖습니다.
<div style="position: relative;"> <div style="position: absolute; top: 10px; left: 10px;"></div> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
