CSS 101 - 위치 정적 대 상대 대 절대 ​​위치

7933 단어 tutorialcssbeginners
2021년 결심 중 하나는 CSS에 대한 지식을 강화하는 것입니다. 나는 거의 1년 이후로 교육을 연기합니다. 그래서 이번에는 변명의 여지 없이 매일 여기 Dev.to에 전날 CSS 과정에서 배운 내용을 게시할 것입니다.

아무것도 놓치고 싶지 않다면 팔로우를 클릭하세요.

CSS 위치



position 속성은 요소에 사용되는 위치 지정 방법의 유형(정적, 상대, 고정, 절대 또는 고정)을 지정합니다.

position CSS 속성은 요소가 문서에 배치되는 방식을 설정합니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성은 배치된 요소의 최종 위치를 결정합니다.

위치: 정적;
요소는 문서의 일반적인 흐름에 따라 배치됩니다. 위쪽, 오른쪽, 아래쪽, 왼쪽 및 z-인덱스 속성은 영향을 주지 않습니다. 이것이 기본값입니다.

위치: 상대적;
요소는 문서의 일반적인 흐름에 따라 배치된 다음 위쪽, 오른쪽, 아래쪽 및 왼쪽 값을 기준으로 자신을 기준으로 오프셋됩니다. 오프셋은 다른 요소의 위치에 영향을 주지 않습니다. 따라서 페이지 레이아웃의 요소에 지정된 공간은 위치가 정적인 경우와 동일합니다.

위치: 절대;
일반 문서 흐름에서 요소가 제거되고 페이지 레이아웃의 요소에 대한 공간이 생성되지 않습니다. 가장 가까운 위치에 있는 조상(있는 경우)을 기준으로 위치가 지정됩니다. 그렇지 않으면 초기 포함 블록을 기준으로 배치됩니다. 최종 위치는 top, right, bottom 및 left 값으로 결정됩니다.

위치: 고정;
position: 절대와 유사하지만 절대와 같은 페이지가 아닌 뷰포트에 상대적으로 유지됩니다.

예제를 만들어 보겠습니다. 해당 요소를 만듭니다.

<body>
    <div>BOX 1</div>
    <h1>position: static;</h1>
    <div>BOX 2</div>
</body>




div {
    color: lighgray;
    font-size: 20px;
    background-color: darkgray;
    border: solid gray;
    padding: 10px;
    height: 40px;
    margin: 10px;
  }


h1 {
  background-color: red;
  margin: 10px;
  padding: 10px;
  font-size: 20px;
  border: solid;
  position: static;
  left: 20px;
  top: 10px;
}


정적(왼쪽 및 위쪽은 무시):


상대적인

div {
    color: lighgray;
    font-size: 20px;
    background-color: darkgray;
    border: solid gray;
    padding: 10px;
    height: 40px;
    margin: 10px;
  }


h1 {
  background-color: red;
  margin: 10px;
  padding: 10px;
  font-size: 20px;
  border: solid;
  position: relative;
  left: 20px;
  top: 10px;
}


상대(원래 위치에서 왼쪽 20px 및 위쪽 10px 요소 위치)

순수한

div {
    color: lighgray;
    font-size: 20px;
    background-color: darkgray;
    border: solid gray;
    padding: 10px;
    height: 40px;
    margin: 10px;
  }


h1 {
  background-color: red;
  margin: 10px;
  padding: 10px;
  font-size: 20px;
  border: solid;
  position: absolute;
  left: 20px;
  top: 10px;
}


절대(요소 위치 왼쪽 20px 및 페이지에서 위쪽 10px)


결론



오늘은 여기까지입니다. 내일도 여행은 계속됩니다. 나중에 뵙겠습니다! 아무것도 놓치지 않으려면 여기 또는 트위터에서 저를 팔로우하세요!

트위터에서 나를 팔로우하세요:
로곡 P1021 우표 액면가 디자인
GET 방법과 POST 방법의 다른 실제 느낌의 실험

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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