html - 차이 - position relative 겹치기




CSS의 절대 위치와 상대 위치 사이에 상위 하위 관계가 있습니까? (2)

나는 CSS뿐만 아니라 코딩의 세계에 새로운 있습니다. relative 위치와 absolute 위치에 관한 여러 기사를 읽었을 때 저의 이해는 다음과 같습니다. 그러나, 나는 absolute 위치가 부모 relative 위치의 자녀이거나 그 반대 인 경우에 확신 할 수 없다.

  • static, relative, absolute and fixed 이라는 4 가지 위치 속성이 있습니다.
  • 엘리먼트가 relative 위치를 갖는다면 그것은 여전히 ​​문서의 정상 흐름의 일부분이다. 그러나 top, right, bottom and left 속성에 의해 상쇄 될 수 있습니다.
  • 또한 z-index 값을 부여 할 수 있으며 정적 요소 위에 자동으로 배치됩니다.
  • 또한 코드 블록의 일부인 자식 요소를 포함하는 방법을 제공하지만 이것이 무엇을 의미하는지 정확히 알 수는 없습니다.

이 정보를 바탕으로 absolute 위치를 가진 요소는 relative 위치를 가진 요소의 하위 요소 여야하며 그렇지 않은 요소는 하위 요소가되어야 함을 의미합니까?

문제가되지 않는다면 언제 부모와 자식 간의 관계에 의존하게 할 것입니까?


실제로는 부모 - 자식 관계가 아닙니다.

상대 위치 지정은 절대 위치 지정과는 아무런 관련이 없습니다. 상대 위치 지정은 설명 된대로 상 / 하 / 좌 / 좌로 오프셋 될 수 있다는 점을 제외하고는 일반적인 정적 위치 지정과 같습니다. "top / right / bottom / left"값은 요소가 일반적으로 흐름에 존재하는 모든 위치에 상대적입니다. 이 값을 제외하면 요소는 여전히 상대적으로 배치되지만 정적으로 배치 된 것처럼 정확하게 배치됩니다.

OTOH, 절대 위치 지정을 사용하면 절대적으로 배치 된 요소의 "상위"요소가 중요합니다.

이것은 LaC의 대답에 대한 설명 때문입니다. 절대 위치 지정에서는 "위쪽 / 오른쪽 / 아래쪽 / 왼쪽"값이 절대 위치, 상대 위치 또는 고정 위치를 갖는 가장 가까운 부모 요소와 관련이 있습니다. 이것을 "참조 요소"라고 부를 것입니다.

다음 예제 조각을 고려하십시오.

<body>
  <div style="width: 50%;">
    <p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
  </div>
</body>

div는 본문의 너비의 50 % 인 왼쪽 맞춤, 정적 (문서 흐름의 정상) 위치가됩니다. p는 뷰포트의 오른쪽 상단 모서리에 20px 크기의 상자가됩니다.

-------------
|     |   |P|
|     |   --|
| div |     |
|     |     |
|     |     |
-------------

절대 / 고정 / 상대 위치 지정이있는 p의 다른 상위 요소가 없으므로 뷰포트가 참조 요소입니다.

div가 상대적으로 위치하도록 변경하십시오.

<body>
  <div style="position: relative; width: 50%;">
    <p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
  </div>
</body>

위쪽 / 오른쪽 / 아래쪽 / 왼쪽 오프셋이 지정되지 않았으므로 div는 이전과 완전히 동일하게 나타납니다. 그러나 p 스타일은 그렇지 않더라도 p 위치가 바뀝니다.

이전에는 p가 뷰포트의 오른쪽 위 모서리에 정렬되었지만 절대 / 고정 / 상대 위치 지정이있는 더 가까운 부모 요소 (div)가 있기 때문입니다. 이제는 div가 참조 요소가되고 p가 오른쪽 상단 모서리에 정렬됩니다.

-------------
|   |P|     |
|   --|     |
| div |     |
|     |     |
|     |     |
-------------

따라서 절대 위치 지정을 사용할 때마다 문서의 참조 요소가 무엇인지 생각해야합니다. 그리고이 참조 요소가 무엇이든간에 선택할 수 있도록 스타일 시트를 디자인 할 수 있으므로 절대 위치 지정을 매우 유용한 레이아웃 기술로 만듭니다.


절대 위치 지정은 절대, 상대 또는 고정 위치 지정이있는 가장 가까운 조상과 관련이 있습니다. 때로는 절대 위치 지정을 사용하여 자식을 배치하기위한 새로운 참조 프레임을 설정하기 위해 요소 상대 위치 지정을 지정하는 것이 유용합니다.





css