ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CSS 요소의 위치 지정
    Front-End/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
    반응형

    'Front-End > CSS' 카테고리의 다른 글

    CSS 테두리 설정  (0) 2024.02.22
    CSS 요소의 내부, 외부 여백  (0) 2024.02.22
    CSS 요소의 글꼴 지정  (0) 2024.02.22
    CSS 요소의 크기 지정  (0) 2024.02.22
    CSS 속성 부여  (0) 2024.02.22
Designed by Tistory.