position 속성은 요소의 위치를 지정하는 데 사용됩니다. 즉, 다음은 포지셔닝 요소입니다 -
-
정적 − 요소 상자는 일반 문서 흐름의 일부로 이전 요소 다음에 선행 요소 다음 요소로 배치됩니다.
-
친척 − 요소의 상자는 정상적인 흐름의 일부로 배치되고 일정 거리만큼 오프셋됩니다.
-
절대 − 요소의 상자는 포함하는 블록과 관련하여 배치되며 문서의 일반적인 흐름에서 완전히 제거됩니다.
-
고정 − 요소의 상자는 위치에 대해 설명된 모든 동작과 함께 절대 위치에 있습니다:절대.
다음은 CSS를 사용하여 요소를 배치하는 코드입니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
color: white;
text-align: center;
height: 100px;
width: 100px;
}
.static {
position: static;
background-color: greenyellow;
}
.relative {
position: relative;
left: 50px;
background-color: rgb(255, 47, 47);
}
.absolute {
position: absolute;
right: 50px;
top: 20px;
background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html> 출력
위의 코드는 다음 출력을 생성합니다 -
