본문 바로가기
내마음대로만들어보자/CSS

position - absolute, relative, static, fixed

by 소농민! 2022. 4. 12.
728x90

1. postion 

position 요소의 위치를 지정해주는 역할을 한다. 

 

2. 적용 방법 

position : static | absolute | fixed | relative

 

3. 속성

  - static : 속성의 정상적인 위치를 설정한다.(기본값)

  - absoulte : 요소의 위치를 절대값으로 지정한다. (위치를 지정할 기준점이 필요)

  - relative : 요소의 위치를 상대적인 위치 및 기준점으로 설정한다.

  - fixed : 요소의 위치를 고정으로 설정한다.

 

* 적용예시

container 영역을 기준점으로 설정하여, cont_right 영역을 고정시키기 위해 작성한 코드

#cont_right {position: absolute; right: 0; top: 0; width: 250px;}
#footer {border-top: 1px solid #dbdbdb;}

/* 컨테이너 */
.container {position: relative;width: 1200px;margin: 0 auto; }/* background: rgba(0,0,0,0.3); */

'내마음대로만들어보자 > CSS' 카테고리의 다른 글

이미지 슬라이드 - slick.js  (0) 2022.04.17
한줄효과 / 두줄효과  (0) 2022.04.15
가상요소 (::before , ::after)  (0) 2022.04.11
box-sizing  (0) 2022.04.10
IR효과기법  (0) 2022.04.10