CSS 복습 (2-2 // position)

1994 단어 CSSCSS

position

레이아웃 보다는 좌표를 활용할 수 있게 도와주는 친구이다.

position: static (default)

레이아웃에서 박스를 처음 위치하는 곳에 두는 것을 뜻한다.

position: fixed

position: fixed;

//만약의 상황을 가정해보자

<body>
 <div></div>
</body>

//body의 height는 1000vw이고 div는 position: fixed가 적용되었다면, 페이지에 대해 밑으로 계속 스크롤 하여도 <div>는 초기 위치에서 고정된 상태로 움직이지 않는다.

하지마 초기 위치를 좌표를 이용해서 바꿀 수 있다.

position: fixed;
//수직에서의 다른 레이어로 취급된다.
top: ?px;
bottom: ?px;
//수평에서의 다른 레이어로 취급된다.
left: ?px;
right: ?px;

이렇게 하면 다른 요소들을 신경쓰지 않고 그 위치에 가있는다.
이 요소들중 한나의 property만 수정해도 다른 요소들과 다른 레이어에 가있게 되고, 더이상 다른 요소들의 block, margin에 영향을 받지 않는다.

position: relative

position: relative;
top: ?px;
left: ?px;
right: ?px;
bottom: ?px;

element가 처음 있었던 곳을 기준으로

주로 조금씩 이동시키고 싶을때 주는 효과이며 이걸 사용하면 부모 엘리먼트 밖으로 나갈 수 있다.

position: absolute;

position: absolute;
top: ?px;
left: ?px;
right: ?px;
bottom: ?px;

이 효과를 주게 되면 부모 엘리먼트로 relative 상태를 찾으러 간다.
relative 상태를 찾게 된다면 그 box를 기준으로 움직이게 된다.
만약 relative가 없다면 body태그를 기준으로 움직인다.

즉, relative 상태의 박스 안에서 원하는 위치로 움직일 수 있게 된다.

디자인 모델 6 대 원칙 안내
LintCode 장난감 공장

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage