CSS 위치: 절대 및 상대
CSS 위치
이름에서 알 수 있듯이 CSS 위치 속성은 웹 페이지에서 요소가 배치되는 방식을 변경하는 데 도움이 될 수 있습니다.
CSS 위치를 사용하면 HTML 요소를 원하는 위치에 배치할 수 있습니다. 요소를 페이지의 자연 위치에서 상대적으로 배치할지 아니면 부모 요소 등을 기반으로 절대적으로 배치할지 여부를 지정할 수 있습니다.
통사론:
position CSS 속성의 구문은 다음과 같습니다.
position: value;이제 다양한 유형의 CSS 위치 지정 관련 속성을 식별하고 싶습니다.
CSS 위치 속성의 유형
다양한 CSS 위치 속성을 나열했으므로 가장 일반적으로 사용되는 두 가지 위치 속성(상대 및 절대)에 대해 자세히 설명합니다.
위치 상대
상대 속성은 HTML 요소를 웹 페이지의 원래 위치나 자연 위치에서 멀리 또는 상대적으로 배치하는 데 도움이 됩니다.
(위, 왼쪽, 오른쪽, 아래)와 같은 다른 위치 지정 속성을 추가하지 않고 요소의 상대적인 위치를 설정하면 아무 일도 일어나지 않지만 즉시 속성을 추가하면
left: 50px; 요소가 웹의 원래 위치에서 50px 이동합니다. 페이지.예시:
이 예에서는 속성이 변경될 때 상대적으로 배치된 div 요소가 어떻게 움직이는지 볼 수 있습니다. 요소가 정상 위치에서 왼쪽 및 위쪽으로 이동합니다.
HTML5:
<div class="parent">
<h1>position relative</h1>
</div>
CSS:
.parent{
position: relative;
left: 500px;
top: 100px;
}
절대 위치
위치 절대를 사용하면 웹 페이지의 어느 위치에나 요소를 배치할 수 있습니다.
요소가 절대 위치에 있으면 해당 요소는 문서의 정상적인 흐름에서 제거되고 다른 요소는 보이지 않는 것처럼 작동합니다.
위치를 설정하기 위해 top, left, bottom, right 위치 속성을 사용합니다.
예 1:
이 예제에서는 속성이 변경될 때 절대 위치에 있는 자식 요소가 어떻게 움직이는지 볼 수 있습니다. 요소가 부모 위치에서 왼쪽 및 위쪽으로 이동합니다.
HTML5:
<div class="parent">
<h1>position relative</h1>
<div class="child">
<h2>position absolute</h2>
</div>
</div>
CSS:
.parent{
position: relative;
left: 500px;
top: 100px;
}
.child{
position: absolute;
top: 10px;
left: 10px;
}
예2:
이 예제에서는 속성이 변경될 때 절대 위치에 있는 자식 요소가 어떻게 움직이는지 볼 수 있습니다. 요소는 기본 html 요소 자체에서 왼쪽과 위쪽으로 이동하여 웹 페이지의 흐름을 방해합니다.
HTML5:
<div class="parent">
<h1>position relative</h1>
<div class="child">
<h2>position absolute</h2>
</div>
</div>
CSS:
.child{
position: absolute;
top: 10px;
left: 10px;
}
메모
절대 위치를 사용할 때 값이 상대(또는 절대) 위치 지정을 사용하여 다음 상위 요소에 상대적임을 알고 싶습니다. 그러한 부모가 없으면 기본적으로
<html> 요소 자체까지 다시 기본 설정되어 페이지 자체에 상대적으로 배치됩니다.과도하게 사용하거나 부적절하게 사용하면 웹 페이지의 유연성이 제한될 수 있습니다.
Reference
이 문제에 관하여(CSS 위치: 절대 및 상대), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/paulomoro/css-position-absolute-and-relative-4f03텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
