Gmail은 절대 위치 지정을 사용하는 요소에 대해 중복을 어떻게 방지합니까?

Question

저는 최근에 CSS의 학습을 시작했고, Gmail의 디자인을 연구 해 왔습니다. Gmail의 작동 방식에 대해 궁금해했기 때문입니다.

내가 알아낼 수없는 한 가지 문제는 Gmail이 겉으로보기에 절대적으로 위치한 div가 여전히 흐름의 일부인 것처럼 행동하는 방식 일뿐입니다. 여기에 내가 말하는 겁니다 사업부는 다음과 같습니다

다음과 같이 해당 사업부의 계산 된 스타일은 다음과 같습니다 브라우저 폭이 감소 할 때

이 문제는, 내가이 절대적 것으로 생각됩니다 위치 지정된 div는 왼쪽의 검색 양식과 직접 겹칠 것입니다. 대신 검색 양식을 마치 흐름의 일부로 압축하는 것처럼 보입니다. 겹쳐지는 것을 막을 수있는 여백이나 패딩을 찾기 위해 검색 폼과 그 주위의 다른 요소들을 점검했지만, 나의 훈련받지 않은 눈은 아무것도 발견하지 못했습니다.

경험이 풍부한 CSS와 Gmail 사용자가 Gmail DOM 트리를보고 나에게 설명해주기를 바랍니다. 건배!

Answer 1

자바 스크립트를 사용할 수 있습니다. 창 개체의 크기 조정 이벤트에 바인딩하고 브라우저 크기를 조정할 때 요소를 다시 계산하고 다시 배치 할 수 있습니다. 일반 자바 스크립트

:

window.onresize = function(event) { 
    // recalculate 
}; 

jQuery를 물 : 절대적 위치 된 요소를 둘러싸는 용기에 대하여 :

$(window).resize(function(event) { 
    // recalculate 
}); 

또 다른 옵션은 위치를 가질 것이다. 해당 상대 컨테이너가 브라우저 창으로 크기가 조정되면 내부의 절대 컨테이너가 함께 이동합니다.