CSS에서 요소의 위치를 정적으로 정의할 수 있습니다. 이는 요소를 특별한 방식으로 렌더링하지 않고 일반적인 방식으로 렌더링합니다. 위치가 정적으로 지정된 요소는 CSS 위치 지정 속성(왼쪽, 오른쪽, 위쪽 및 아래쪽)의 영향을 받지 않습니다.
예시
CSS 정적 위치 지정 방법의 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
}
div:first-child {
position: static;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>This is demo text wherein we are displaying an example for static positioning.</p>
<div></div>
</body>
</html> 출력
다음은 위의 코드에 대한 출력입니다 -
예시
포지셔닝 방법의 또 다른 예를 보자 -
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px double #a43356;
margin: 5px;
padding: 5px;
}
#d1 {
position: relative;
height: 10em;
}
#d2 {
position: absolute;
width: 20%;
bottom: 10px; /*relative to parent d1*/
}
#d3 {
position: fixed;
width: 30%;
top:10em; /*relative to viewport*/
}
</style>
</head>
<body>
<div id="d1">This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html> 출력
다음은 위의 코드에 대한 출력입니다 -
