티스토리 뷰

CSS

CSS 배치

dev23 2022. 2. 3. 21:47
반응형

요소 배치

- position 속성을 이용해 문서 상에 요소를 배치하는 방법을 지정할 수 있다.

- top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.

- position 속성은 아래의 목록에서 하나의 키워드 값을 선택해 지정할 수 있다.

static - 요소를 일반적인 문서 흐름에 따라 배치한다.
- top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않으며, 기본값이다.
relative - 요소를 일반적인 흐름에 따라 배치하고, 자기 자신을 기준으로 오프셋을 적용한다.
- z-index 값이 auto가 아니라면 새로운 쌓임 맥락을 생성한다.
absolute - 요소를 일반적인 무서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
- 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다. 단, 조상 중 위치 지정 요소가
 없다면 초기 컨테이닝 블록을 기준으로 삼는다.
- 최종 위치는 top, right, bottom, left 값이 지정한다.
- z-index의 값이 auto가 아니라면 쌓임 맥락을 생성한다.
fixed - 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
- 뷰포트의 초기 컨테이닝 블록을기준으로 삼아 배치한다.
sticky - 요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤되는
 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상)을 기준으로 
 top, right, bottom, left 의 값에 따라 오프셋을 적용한다.

 

배치 유형

위치 지정 요소 - position의 계산값이 relative, absolute, fixed, sticky 중 하나인 요소이다.
- 즉, 값이 static이 아닌 모든 요소를 말한다.
상대 위치 지정 요소 - position의 계산값이 relative인 요소이다.
- top, bottom은 원래 위치에서의 세로축 거리를 의미하고, 
  left, right 는 원래 위치에서의 가로축 거리를 지정한다.
절대 위치 지정 요소 - position의 계산값이 absolute 또는 fixed인 요소이다.
- top, right, bottom, left 는 요소의 컨테이닝 블록 모서리로부터의 거리를 지정한다.
- 절대 위치 지정 요소는 새로운 블록 서식 맥락을 생성한다.
끈끈한 위치 지정 요소 - position의 계산값이 sticky이 요소이다.
- 평소에는 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록이 자신의 플로우
 루트에서 지정한 임계값을 넘으면 fixed처럼 화면에 고정된다.

 

상대 위치 지정

- 상대적으로 배치된 요소는문서 내에서 정상적인 위치에서 주어진 오프셋만큼 떨어지지만, 다른 요소에는 영향을

 미치지 않는다.

HTML

<body>
    <div class="box" id="one">One</div>
    <div class="box" id="two">Two</div>
    <div class="box" id="Three">Three</div>
    <div class="box" id="Four">Four</div>
</body>

CSS

<style>
    .box{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }

    #two{
        position: relative;
        top: 20px;
        left: 20px;
        background-color: blue;
    }

</style>

 

- 결과

position: relative;

 

절대 위치 지정

- 상대적으로 배치된 요소가 일반적인 문서 흐름에 따르는 것과 달리, 절대적으로 배치된 요소는 흐름에서 제거된다.

- 따라서 다른 요소는 그 요소가 존재하지 않는 것처럼 배치된다.

- 절대적으로 배치된 요소는 가장 가까운 위치 지정 조상을 기준으로 배치된다.

- 그런 요소가 존재하지 않는다면, 초기 컨테이닝 블록이 기준이 된다.

 

CSS

<style>
    .box{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }

    #two{
        position: absolute;
        top: 20px;
        left: 20px;
        background-color: blue;
    }
</style>

 

- 결과

position: absolute;

 

 

고정 위치 지정

- 고정 위치 지정은 절대 위치 지정과 비슷하지만, fixed는 요소의 컨테이닝 블록이 뷰포트의 초기 컨테이닝이라는

 점에서 다르다.

- 따라서 스크롤에관계 없이 화면의 특정 지점에 고정되는 떠다니는 요소를 생성할 수 있다.

 

HTML

<body>
    <div class="outer">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
          Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
          Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
          Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
          Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
          Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
          Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
          Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
          Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
          Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
          Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
        </p>
        <div class="box" id="one">One</div>
      </div>
</body>

 

CSS

<style>
    .box {
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }

    #one {
        position: fixed;
        top: 80px;
        left: 10px;
        background: blue;
    }

    .outer {
        width: 500px;
        height: 300px;
        overflow: scroll;
        padding-left: 150px;
    }
</style>

스크롤 위

 

스크롤 아래

 

 

출처/참고 : https://developer.mozilla.org/ko/docs/Web/CSS/position

 

position - CSS: Cascading Style Sheets | MDN

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.

developer.mozilla.org

 

반응형
저작자표시

'CSS' 카테고리의 다른 글

CSS 배경  (0) 2022.02.02
글꼴, 문자  (0) 2022.02.02
CSS 박스 모델  (0) 2022.02.02
CSS 속성  (0) 2022.02.02
선택자 우선순위  (0) 2022.02.02
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함