position
레이아웃을 배치하거나, 객체를 위치시킬 때 사용하는 css 속성
상속되지 않으며 위, 오른쪽, 아래, 왼쪽의 위치를 같이 설정할 수 있음
static (기본값)
위치를 지정하지 않을 때 사용함
relative
위치를 계산할 때 static의 원래 위치부터 계산
일반적인 흐름에 따라 상하좌우 offset 적용가능
다른 요소에 영향을 주지 않음
absolute
원래 위치와 상관없이 위치를 지정할 수 있음. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정된다.
일반적인 문서 흐름에서 배제됨
! relative 배치 요소는 문서 흐름 속에 남아 있지만 absolute 배치 요소는 전체적 문서 흐름에서 제외된다.
fixed
원래 위치와 상관없이 위치를 지정할 수 있음. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정할 수 있음. 브라우저 화면의 상대 위치를 기준으로 결정. 예) 네비게이션 바
sticky
일반적 문서 흐름에서 배제되고, 스크롤되는 가장 가까운 요소에 offset 적용
static, relative, absolute 차이
참고 포스팅
CSS position, relative 와 absolute 차이
CSS position, relative 와 absolute 차이
포지션(position) Html 문서에서 각 요소를 배치하는 방법에 대해 정의하는 속성이다. 즉 요소의 배치 방법을 결정하는 것이 포지션(position) 속성이다. 포지션(position) 속성이 각 요소의 배치 방법을
nonipc.com
참고한 포스트에서 소개한 코드를 직접 쳐봤다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.relative {
position: relative;
width: 500px;
height: 300px;
border: 5px solid blue;
}
div.absolute {
/* position: relative; */
/* position: absolute; */
top: 0;
left:100px;
width: 150px;
height: 150px;
border: 6px solid red;
color: red;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>가장 가까운 조상:</p>
<div class="relative">relative;
<div class="absolute">absolute;</div>
<p>일반 문단 텍스트</p>
</div>
</body>
</html>
div.absolute 스타일을 1) static, 2) relative, 3) absolute 로 바꿨을시 어떻게 변화하는지 확인해보자.
1) static
<코드>
div.absolute {
/* position: relative; */
/* position: absolute; */
top: 0;
left:100px;
width: 150px;
height: 150px;
border: 6px solid red;
color: red;
}
<결과>
2) relative
<코드>
div.absolute {
position: relative;
/* position: absolute; */
top: 0;
left:100px;
width: 150px;
height: 150px;
border: 6px solid red;
color: red;
}
<결과>
3) absolute
<코드>
div.absolute {
/* position: relative; */
position: absolute;
top: 0;
left:100px;
width: 150px;
height: 150px;
border: 6px solid red;
color: red;
}
<결과>
비교
static, relative, absolute 차이 (2번째 예시)
wrapper div 아래
input + img 묶여있음
1) static
<코드>
.wrapper {
position: relative;
width: 300px;
}
input {
width: 100%;
border: 1px solid #bbb;
border-radius: 8px;
padding: 10px 12px 10px 12px;
font-size: 14px;
}
img {
/* position: absolute; */
width: 17px;
top: 10px;
right: 12px;
margin: 0px;
}
<결과>
2) relative
<코드>
img {
position: relative;
width: 17px;
top: 10px;
right: 12px;
margin: 0px;
}
<결과>
input 의 width가 100% 라서 img는 그 밑에 위치하게 되고
right offset 값으로 인해 옆으로 숨어버림
3) absolute
<코드>
img {
position: absolute;
width: 17px;
top: 10px;
right: 12px;
margin: 0px;
}
<결과>
absolute 는 부모 요소인 wrapper (position: relative) 에 대해서 offset 값을 적용하고
다른 문서 요소의 흐름에 방해받지 않음
이때 right 대신 left offset 값을 주면?
<코드>
img {
position: absolute;
width: 17px;
top: 10px;
left: 12px;
margin: 0px;
}
<결과>
결론
relative는 일반적인 문서 흐름상 자신이 위치해야 할 곳에서 시작하고
absolute는 부모 요소 위치에서 시작한다.
relative는 문서 흐름에 남아있으나
absolute는 전체적인 문서 흐름에서 제외된다.
'TIL' 카테고리의 다른 글
| [Wecode] JavaScript_sliceCityFromAddress 함수 구현하기 (0) | 2022.09.22 |
|---|---|
| [Wecode] inline, block, inline-block (1) | 2022.09.21 |
| [Wecode] Semantic Web, Semantic Tags (0) | 2022.09.20 |
| [TIL] Do it 자바스크립트_함수와 이벤트 (0) | 2022.08.03 |
| [TIL] Do it 자바스크립트 입문_제어문 (0) | 2022.07.30 |