position 속성_ relative, absolute, fixed

 

 

Position

---

 

CSS의 position 프로퍼티를 사용하면 

html코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있다. 

 

즉, 문서상에 요소를 배치하는 방법을 지정하는 역할을 한다.

 

position에서 사용하는 값은 4개가 있는데, static은 거의 사용하지 않아서 넘어가겠다.

 

• position: static;

• position: relative;

• position: absolute;

• position: fixed;

 

relative

---

.relative {
	position: relative;
}

 

이렇게 position: relative 한다고 해서 

클래스명이 relative인 div의 위치가 변하고 이런건 아니다. 

사실 이 것 자체로는 특별한 의미는 없다.

 

위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다. 

 

 

.relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}

 

 

 

absolute

---

position: absolute; 

는 이름과 같이 절대적인 위치에 둘 수 있다.

 

상위 태그, 즉 부모태그에 대해 절대적으로 움직이게 된다.

부모태그 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.

일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative를 부여하면 된다.

 

 

그리고 그 부모태그 안에서 right, bottom, left 등 값을 움직이면 된다.

 

예를들어, right: 0; 의 의미는 오른쪽으로부터 0만큼 떨어졌다는 뜻이라 부모의 우측에 딱 붙어서 출력된다.

 

 

 

 

fixed

---

 

홈페이지에서 스크롤을 계속 내려도 내려도 고정된 것들을 본 적이 있는가? 

예를들면, 지금 내가 블로그를 작성하는 중에

아무리 글이 길어지더라도 아래와 같이 기본 도구들이 나온 도구 라인은 상단에 계속 고정되어 있다.

 

 

어떻게 가능한가?

 

바로 position: fixed 이다.

 

고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다.

 

예를들면, 아래와 같이 코드를 작성할 수 있다.

 

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

 

 

 

이 position 친구들이 실제로 css 현장에서 꽤나 자주 쓰이는 것 같다. 👧

잘 활용해서 어여쁜 사이트를 구축해보자.

 

 

 

 

출처: wecode reple it.

https://ko.learnlayout.com/position.html