[HTML / CSS] Position 속성 - relative 와 absolute
1. Position 속성
css의 position 속성 중 relative와 absolute의 차이를 알아보자!
css의 position 속성 중 relative와 absolute의 차이를 알아보자!
이 둘의 차이를 알려면, 먼저 position의 기본 속성인 static 을 알아야한다.
1) static
static
은 position속성의 기본값으로 모든 태그들은 이미 처음부터 static
상태다. 그러므로 우리가 position: stactic;
이라고 적어줄 일은 없다. position 속성을 갖지 않은 버튼을 하나 만들어보자.
/*position 속성을 부여하지 않은 버튼*/
.btn1{
all: unset;
background-color: cornflowerblue;
color: white;
padding: 5px 20px;
border-radius: 20px;
cursor: pointer;
border-style: dotted;
border-color: white;
}
그럼, 아래와 같은 버튼이 생성된다. 이미지의 선은 브라우저 상단을 보여주기 위해서 같이 캡쳐했다. 어떤 값도 부여해주지 않았음에도 버튼과 브라우저 사이에 약간의 여백이 있음을 알 수 있다. 이게 모든 태그들이 static
상태에 있다는 증거!
2) relative
버튼의 위치를 바꿔 여백을 좀 주고싶다면 이제 position: relative;
가 등장할 차례다. relative
는 static
이었을때의 위치를 기준으로 값을 갖게된다.
/*position: relative속성을 부여하고 top: 100px; 로 지정해 주었다.*/
.btn1{
all: unset;
background-color: cornflowerblue;
color: white;
padding: 5px 20px;
border-radius: 20px;
cursor: pointer;
border-style: dotted;
border-color: white;
position :relative;
top: 100px;
}
역시나 상단 브라우저창을 함께 캡쳐했다. btn1은 static 상태에서 top: 100px; 만큼 이동했다.
3) absolute
absolute
는 static
속성값에 구애 받지 않고 요소를 위치시킬 수 있다.
/*position: absolute; top: 100px을 부여해준 버튼 */
.btn2{
all: unset;
background-color: cornflowerblue;
color: white;
padding: 5px 20px;
border-radius: 20px;
cursor: pointer;
border-style: dotted;
border-color: white;
position : absolute;
top: 100px;
}
btn2에position: absolute; top: 100px;
값을 부여해주었다. 그럼 아래와 같이 브라우져 상단에서부터 100px떨어진 곳에 버튼이 위치하게 된다.
relative와 absolute 비교
따로 보니 relative top: 100px; 인 버튼과 absolute top:100px인 버튼의 위치 차이를 느끼기 어려워 동시에 만들어 보았다.
btn1
에는 position: relative; top: 100px;
, btn2
에는 position: absolute; top: 100px;
을 부여해 주었다.
.btn1{
all: unset;
background-color: cornflowerblue;
color: white;
padding: 5px 20px;
border-radius: 20px;
cursor: pointer;
border-style: dotted;
border-color: white;
position :relative;
top: 100px;
}
.btn2{
all: unset;
background-color: cornflowerblue;
color: white;
padding: 5px 20px;
border-radius: 20px;
cursor: pointer;
border-style: dotted;
border-color: white;
position : absolute;
top: 100px;
}
그럼 아래와 같은 결과가 나오는데, static기본값을 가진 상태에서 top: 100px; 만큼 이동한 btn1
이 btn2
보다 더 아래에 있는 것을 확인 할 수 있다.
++참고로 position: fixed;
요 아이도 static속성을 기본으로 갖지 않아 기준점이 브라우저 왼쪽 상단이 된다.
참고 링크
https://engkimbs.tistory.com/922
Author And Source
이 문제에 관하여([HTML / CSS] Position 속성 - relative 와 absolute), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dev_cecy/HTML-CSS-Position-속성-relative-와-absolute저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)