CSS에서는 Position 속성이 자주 사용되며 주로 절대 위치 지정과 상대 위치 지정이 있습니다. 단순 사용은 문제가 되지 않습니다. 특히 중첩된 경우에는 다소 혼란스러울 수 있습니다.
Position 속성: 요소의 위치 지정 유형을 지정합니다. 즉, 요소는 문서 흐름의 레이아웃에서 분리되어 페이지의 어느 곳에나 표시됩니다.
위치 속성 값:
절대: 정적 위치 지정이 아닌 첫 번째 요소를 기준으로 절대 위치 지정 요소를 생성합니다. 위치 지정을 위한 상위 요소입니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
relative: 상대적으로 위치가 지정된 요소를 생성하고 일반 위치를 기준으로 배치됩니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.
고정: 브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다.
정적: 기본값입니다. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
inherit: 위치 속성의 값이 상위 요소에서 상속되도록 지정합니다.
가장 일반적으로 사용되는 두 가지 방법은 절대적 방법과 상대입니다.
위치 보조 속성:
①왼쪽: 텍스트에 삽입할 픽셀 수를 나타냅니다. left of the element 요소를 오른쪽으로 이동할 픽셀 수입니다.
②right: 요소 오른쪽에 삽입할 픽셀 수와 요소를 왼쪽으로 이동할 픽셀 수를 나타냅니다.
③top: 요소 위에 삽입할 픽셀 수와 요소를 아래로 이동할 픽셀 수를 나타냅니다.
IV하단: 요소 아래에 삽입할 픽셀 수와 요소를 위로 이동할 픽셀 수를 나타냅니다.
위 속성의 값은 음수(단위: px)일 수 있습니다.
절대 위치
절대 위치 ; 레이아웃은 문서 흐름에서 벗어나 나머지 공간은 후속 요소로 채워집니다. 위치 지정의 시작 위치는 가장 가까운 상위 요소입니다(위치는 정적이지 않음). 그렇지 않으면 본문 문서 자체입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>참고: 우리는 Sub1의 절대 위치를 지정했기 때문에 Sub1의 위치가 오프셋되고 형제 Div Sub2가 Sub1의 위치를 차지하고 Sub1은 Sub2를 차단합니다.
상대 상대 위치 지정
상대 위치 지정은 문서 흐름의 레이아웃을 벗어나지 않습니다. 문서 흐름의 원래 위치에 공백을 남겨두고 자체 위치를 변경합니다. 위치 지정의 시작 위치는 문서 흐름에서 이 요소의 원래 위치입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html> 참고: Sub1이 오프셋되어 Sub2의 위치에 영향을 주지 않는 동시에 Sub2를 덮는다는 것을 알 수 있습니다. 오프셋은 Div와 관련이 없다는 점을 기억하세요. 상위이지만 Sub1의 원래 위치를 기준으로 합니다.
고정 위치
고정 위치는 절대값과 유사하지만 스크롤 막대가 움직일 때 위치가 변경되지 않습니다.
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>참고: Sub2는 항상 몸체와 함께 배치됩니다.
다음 섹션