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.