Front-End/CSS

CSS 요소의 위치 지정

코드깎는머슴 2024. 2. 22. 10:48
728x90
반응형

bottom

    - 요소의 하단 위치 지정
    - position 속성 값이 static인 경우 무시
    - top 속성과 함께 사용하지 않는다.
    - 값
        크기 리터럴


left

    - 요소의 좌측 위치 지정
    - position 속성 값이 static인 경우 무시
    - right 속성과 함께 사용하지 않는다.
    - 값
        크기 리터럴


right

    - 요소의 우측 위치 지정
    - position 속성 값이 static인 경우 무시
    - left 속성과 함께 사용하지 않는다.
    - 값
        크기 리터럴


top

    - 요소의 상단 위치 지정
    - position 속성 값이 static인 경우 무시
    - bottom 속성과 함께 사용하지 않는다.
    - 값
        크기 리터럴

 

position

    - 요소의 포지셔닝
    - 기본값 : static
    - 값
        relative    : 상대적 포지셔닝. 본래 요소의 위치를 기준점으로 움직인다.

        absolute    : 절대적 포지셔닝. position이 static이 아닌 가장 가까운 부모/선조를 기준으로 움직인다. 그러한 부모/선조가 없다면 문서를 기준으로 움직인다. 
                      다른 요소의 흐름에 영향을 미치치 않는다.

        fixed       : 고정 포지셔닝. 뷰포트(문서의)를 기준으로 움직인다. 화면에 떠서 움직이며 스크롤에 영향을 받지 않는다. 
                      다른 요소의 흐름에 영향을 미치치 않는다.

        static      : 포지셔닝을 하지 않음. top, right, bottom, left 속성을 무시한다.


z-index

    - Z축으로의 배치 순서를 설정
    - position 속성 값이 static인 요소는 해당 속성 무시
    - 값
        정수    : 기본값 0, 값이 클수록 위로(사용자에게 가까이)배치됨

 

 

728x90
반응형