[html] 절대 위치 내 절대 위치

Program / 글쓴이

3 가지 div요소가 있습니다.

1 일 div이 더 크고 (포장)position:relative;

2는 div1 차 절대 위치 div의 상대 위치 (및 1에 포함된다 div)

3rd div는 2nd에 포함되며 div절대 위치도 있습니다.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

왜 3 번째 div위치가 2 번째 div(1 번째에 대한 절대 위치이기도 함)에 절대 div적이고 div상대 위치가 있는 1 번째 위치에 있지 않은 이유는 무엇입니까?

3rd div는 절대 위치 2nd에 대한 절대 위치 이기 때문 div입니다.

답변

왜냐하면 position: absolute아이들의 상대적 위치를 재설정 하기 때문 position: relative입니다.

이 문제를 피할 수있는 방법이 없습니다. 세 번째 항목 div이 첫 번째 항목 에 대해 절대적으로 위치하도록하려면 첫 번째 항목의 하위 항목으로 만들어야합니다.

답변

모두 position:relative와 position:absolute위치 ascestors 등의 요소를 포함 설정합니다.

div 1을 기준으로 div 3을 배치해야하는 경우 div 1의 직계 자식으로 만듭니다.

참고 position: relative요소가 상대 위치 수단 자연스러운 위치 position: absolute수단은 소자에 대해 위치되는 제 position:relative또는 position:absolute조상 .

답변

위치 정적 : 정적 위치는 위치가 전혀 지정되지 않은 경우 HTML 파일의 정상적인 흐름에서 요소가 나타나는 기본 방법입니다.

중요 : top, right, bottom및 left속성은 NO EFFECT ON 정적이 ELEMENT의 방향이.

상대적 위치 : 상대 값으로 요소를 배치하면 HTML 파일의 정상적인 흐름에서 요소 (및 요소가 차지하는 공간)가 유지됩니다.

그런 다음 속성을 사용하여 일부 금액으로 요소를 이동할 수 있습니다 left, right, top와 bottom. 그러나 이로 인해 요소가 페이지에있는 다른 요소와 겹칠 수 있습니다. 이는 원하는 효과 일 수도 있고 아닐 수도 있습니다.

상대적으로 배치 된 요소는 해당 지점에서 이동할 수 있지만 차지한 공간은 그대로 유지됩니다.

절대 위치 : 요소에 절대 위치 값을 적용하면 일반 흐름에서 제거됩니다. 절대 위치 요소를 이동할 때 참조 점은 가장 가까운 위치 지정 컨텍스트라고도하는 정적 위치가 아닌 위치가 선언 된 가장 가까운 포함 요소의 상단 / 왼쪽입니다. 따라서 static 이외의 위치를 ​​가진 포함 요소가 없으면 body 요소의 왼쪽 상단 모서리에서 배치됩니다.

귀하의 경우 3rd의 가장 가까운 컨테이너는 2nd입니다.

답변

또 다른 명확한 대답.

현재 시나리오는 다음과 같습니다.

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

그리고 당신은 그것으로 어려움을 겪고 있습니다.

HTML을 변경할 수 있으면 다음과 같이하십시오.

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

답변

3 이유 div요소가 절대적으로 두번째에 위치 div하는 CSS 사양의 설명에 있기 때문에 요소가 여기 은 “부모”요소 (더 나은 말했다 : 용기 블럭) 때문에, 인의 절대 위치 요소 아닌 , 반드시 즉각적인 부모 요소 만 오히려 바로 배치 된 요소 즉 static, 예를 들어 위치가 다른 요소로 설정된 요소position: relative/absolute/fixed/sticky;

따라서 코드에서 가능할 때마다 세 번째 div요소가 첫 div번째 div요소와 관련하여 절대적으로 배치되도록하려면 두 번째 요소를 position: static;기본값 으로 만들어야합니다 (또는 단순히 position: ...두 번째 div요소 의 규칙 집합에서 선언을 제거하면됩니다 ). .

위의 첫번째 것 함유 블록 절대적 위치하는 제 3의 2 무시 이 위치 결정 목적으로한다.divdivdiv

도움이 되었기를 바랍니다.

답변

누군가가 여전히 이것에 대한 답을 찾고 있다면.

clear: both;첫 번째 절대 위치 div에 스타일을 추가 하여 자식을 재설정하고 자체 absolute위치 를 사용할 수 있도록함으로써이 결과를 얻을 수있었습니다 .

답변