CSS 레이아웃 - position 속성
이 position속성은 요소에 사용되는 위치 지정 방법의 유형 (정적, 상대적, 고정 또는 절대)을 지정합니다.
position 속성
이 position속성은 요소에 사용되는 위치 지정 방법의 유형을 지정합니다.
네 가지 위치 값이 있습니다.
- static
- relative
- fixed
- absolute
그런 다음 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 배치됩니다. 그러나 position 속성을 먼저 설정 하지 않으면 이러한 속성이 작동하지 않습니다 . 또한 위치 값에 따라 다르게 작동합니다.
position : static;
HTML 요소는 기본적으로 정적으로 배치됩니다.
정적으로 배치 된 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을받지 않습니다.
요소 position: static;는 특별한 방법으로 배치되지 않습니다. 페이지의 정상적인 흐름에 따라 항상 배치됩니다.
이 <div> 요소의 위치는 static입니다.
다음은 사용 된 CSS입니다.
div.static {
position: static;
border: 3px solid #73AD21;
}
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 3199 | |
| 3198 |
CSS
scale () 메서드
|
| 3197 |
CSS
rotate () 메서드
|
| 3196 | |
| 3195 |
CSS
CSS3 단어 속보
|
| 3194 |
CSS
CSS3 워드 래핑
|
| 3192 |
CSS
css 굵은 글씨 사용
|
| 3191 |
CSS
css 원하는 글꼴 사용하기
|
| 3190 | |
| 3189 | |
| 3188 | |
| 3187 |
CSS
CSS3 상자 그림자 속성
|
| 3186 |
CSS
CSS3 그림자 효과 다섯번째
|
| 3185 |
CSS
CSS3 그림자 효과 네번째
|
| 3184 |
CSS
CSS3 그림자 효과 세번째
|
| 3183 |
CSS
CSS3 그림자 효과 두번째
|
| 3182 |
CSS
CSS3 그림자 효과
|
| 3181 | |
| 3180 | |
| 3179 |
CSS
CSS3 그라디언트 모양 설정
|
| 3178 | |
| 3177 |
CSS
CSS3 그라디언트 두번째
|
| 3176 |
CSS
CSS3 그라디언트
|
| 3175 |
CSS
CSS3 Colors
|
| 3174 | |
| 3173 | |
| 3172 | |
| 3171 | |
| 3170 |
CSS
CSS3 배경 크기
|
| 3169 |
CSS
CSS3 다중 배경
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기