CSS의 위치 속성은 페이지에서 요소의 위치를 설정하는 데 사용됩니다. 이 속성을 통해 적절하다고 생각되는 위치에 속성을 배치할 수 있습니다.
position 속성은 요소의 위치 지정 유형을 지정합니다. 이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다.
position 속성은 요소에 적용되는 위치 지정 방법 유형(정적, 상대, 고정, 절대 또는 고정)을 지정합니다.
요소는 실제로 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 배치됩니다 . 그러나 이러한 속성은 위치 속성을 먼저 설정하지 않으면 아무런 효과가 없습니다. 포지션 값에 따라 다르게 작동합니다.
1. 정적 위치 지정: 정적
HTML 요소는 기본적으로 정적으로 배치됩니다.
정적 위치 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을 받지 않습니다.
position: static 요소는 특별한 방식으로 배치되지 않습니다. 항상 페이지의 일반적인 흐름에 따라 배치됩니다.
예:
<!DOCTYPEhtml><html><head><style>div{height:100px;border:1pxsolidblack;}div.static{width:130px;height:50px; background-color:#CCC;line-height:50px;text -align:center;position:static;top:50px;left:20px;}</style></head><body><div><divclass=static>item;</div></div></body ></html>실행 결과:
2. 상대 위치 지정: 상대
예:
<html><head><styletype=text/css>#item1{너비:100px;높이:100px;배경-색상:녹색;}#item2{너비:100px;높이:100px;배경-색상:빨간색;}< /style></head><body><divid=content><divid=item1>항목1</div><divid=item2>항목2</div></div></body></html>실행 결과:
코드에서 CSS 스타일 파일을 다음과 같이 변경하면:
<html><head><styletype=text/css>#item1{너비:100px;높이:100px;배경-색상:녹색;}#item2{너비:100px;높이:100px;배경-색상:빨간색;위치: 상대;왼쪽:20px;상위:20px;}</style></head><body><divid=content><divid=item1>항목1</div><divid=item2>항목2</div></div ></body></html>실행 결과:
요약: 상대는 일반 문서 흐름의 위치를 기준으로 한 오프셋입니다. 원래 점유된 위치는 여전히 존재하므로 후속 요소의 위치에 영향을 미치지 않습니다. 왼쪽은 원래 위치의 오른쪽을 기준으로 오프셋을 의미하고, 위쪽은 원래 위치의 아래쪽을 기준으로 오프셋을 의미합니다. 왼쪽과 오른쪽이 동시에 존재할 경우 왼쪽만 유효합니다. 위쪽과 아래쪽이 동시에 존재할 경우 위쪽만 유효합니다. 상대 오프셋은 개체 여백의 왼쪽 위를 기준으로 합니다.
3. 절대 위치 지정: 절대
예:
<html><head><styletype=text/css>#item1{너비:100px;높이:100px;배경-색상:녹색;}#item2{너비:100px;높이:100px;배경-색상:빨간색;}# content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div ></div></body></html>실행 결과:
CSS 스타일 파일을 수정하는 경우:
<html><head><styletype=text/css>#item1{너비:100px;높이:100px;배경-색상:녹색;}#item2{너비:100px;높이:100px;배경-색상:빨간색;위치: 절대;왼쪽:20px;top:20px;}#content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>항목2</div></div></body></html>실행 결과:
상위 요소의 위치 속성 값이 기본값(정적)인 경우 브라우저 창을 기준으로 절대값이 위치하는 것을 볼 수 있습니다.
콘텐츠의 위치 속성 값이 기본값이 아닌 값으로 설정된 경우 절대값은 상위 요소를 기준으로 배치됩니다.
<html><head><styletype=text/css>#item1{너비:100px;높이:100px;배경-색상:녹색;}#item2{너비:100px;높이:100px;배경-색상:빨간색;위치: 절대;왼쪽:20px;상단:20px;}#content{margin-left:100px;margin-top:100px;위치:상대}</style></head><body><divid=content><divid=item1 >item1</div><divid=item2>item2</div></div></body></html>실행 결과:
계속해서 CSS 스타일을 수정합니다.
<html><head><styletype=text/css>#item1{너비:100px;높이:100px;배경-색상:녹색;}#item2{너비:100px;높이:100px;배경-색상:빨간색;}# content{margin-left:100px;margin-top:100px;position:absolute;padding:20px;border:10pxsolidblack;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>항목2</div></div></body></html>실행 결과:
변경 사항을 확인하셨나요? 외부 div를 절대값으로 설정하면 외부 div의 너비가 100%에서 자동으로 변경됩니다.
요소의 위치 속성을 절대 또는 고정으로 설정하면 세 가지 일이 발생합니다.
(1) 요소를 Z축 방향으로 한 레이어 이동합니다. 요소가 일반적인 흐름을 벗어나므로 더 이상 원래 레이어의 공간을 차지하지 않고 하위 레이어의 요소를 덮게 됩니다.
(2) 요소는 요소에 대해 display: block을 설정하는 것과 동일한 블록 수준 요소가 됩니다(<span>과 같은 인라인 요소를 제공하고 절대값을 설정한 후 너비와 높이).
(3) 요소가 블록 수준 요소인 경우 요소의 너비가 원래 너비인 100%(한 줄 점유)에서 자동으로 변경됩니다.
4. 고정 위치: 고정
고정 위치 지정은 브라우저 창을 기준으로 요소의 위치를 지정하는 것입니다. 고정 위치 지정을 사용하는 요소는 마치 페이지에 고정된 것처럼 브라우저 창의 스크롤로 인해 이동하지 않습니다. 웹에서 맨 위로 돌아가기 버튼을 자주 볼 수 있습니다. 이는 고정 위치 지정을 사용하여 달성됩니다.
예:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; 높이:200px;너비:200px;}</style></head><body><divclass=outstyle=position:relative;><divclass=instyle=Background-color:wheat;></div><divclass=instyle =배경색:빨간색;위치:고정;왼쪽:20px;하단:10px;></div><divclass=instyle=배경-색상:파란색;></div></div></body></ HTML>실행 결과:
5. 끈끈한 위치 지정: 끈끈함
고정 위치 지정은 앞에서 소개한 네 가지 위치 지정 방법과 다릅니다. 이는 페이지를 스크롤할 때 요소를 어느 정도 스크롤할 때의 효과와 동일합니다. 고정 위치 효과가 다시 나타납니다. 예를 들어 일부 웹페이지의 탐색 메뉴는 페이지가 로드될 때 기본 위치에 있으며, 아래로 스크롤하면 페이지 상단에 고정됩니다.
예:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; 높이:200px;너비:250px;}</style></head><body><divclass=out><divclass=instyle=배경-색상:밀;></div><divclass=instyle=배경-색상: red;></div><divclass=instyle=Background-color:blue;></div></div></body></html>실행 결과:
