CSS의 Position

박상영·2020년 5월 25일
0

Position의 속성(attribute)의 속성엔 static:, absolute:, relative:, fixed:, inherit: 등이 있다. 하지만 오늘 배우고 사용한 속성 3가지(absolute, rerlative, fixed)를 알아보려고 한다.

Absolute

absolute 는 절대 좌표와 함께 위치를 지정해 줄 수 있는 속성이다.
하지만, 절대적인 움직임은 특정 부모에 대해 절대적으로 움직인다.
부모 중에서 position의 값이 relative, fiex, absolute 3가지 중에 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.

absolute를 사용할 경우에는 절대적으로 움직이고 싶은 부모에게 position: relative;를 부여하여 사용하면 된다.

예를들면

p {
  margin: 0;
  background-color: yellow;
}

.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

구분을 위해 p태크에 노란색 배경을 넣었다.
원래 p태그는 block-element이기 때문에 가로의 크기가 부모의 너비만큼 전부 차지하지만, 마치 inline-element처럼 내용의 크기만큼만 너비가 생겼다.
이렇게 absolute 값을 갖게 되면, 내용의 크기만큼만 가로 크기가 된다.

Relative

position: relative; 는 그 자체로는 특별한 의미가 없다.
그래서 딱히 어느 위치로 이동하거나 하진 않는다.
하지만 위치를 이동시키는 top, right, bottom, left 특성이 있으면 위치 이동을 할수있다.
위에 위치를 이동시키는 특성의 4가지(top, right, bottom, left)는 position이라는 특성이 있을때만 적용된다.

예를들어보자.

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

이렇게 보면 div, div.relative, div.relative.top-20은 똑같이 생겼지만, 먼저 position을 사용하였기 때문에
top-20에서 top과 left를 이용하여 움직일 수 있었다.

Fixed

position: fiexd; 는 말 그대로 고정하는 속성이다.
브라우저 화면의 상대 위치에 고정되어 스크롤을 내리거나 올릴때 그 자리에 고정되있으면 fixed를 사용한 것이다. 하지만 ie7,ie8 브라우저 환경에서는 position:fixed; 속성이 적용되지 않으므로 문서 타입을 규정해주어야 한다.

사진에서 보이다 싶이, 구글 검색엔진에서 위로 스크롤을 최대한 올리면 보이는 형태이다.
하지만 내리면,

이런식으로 다른 창들은 없어졌지만, 검색창은 그대로이다. 이것또한 fiexd를 사용한 고정이라 생각한다.

profile
backend

0개의 댓글