overflow hidden안 absolute

[dasony]

안녕하세요.

Code: Select all

  <div style="width: 200px; height: 300px; overflow: hidden;">
	<div id="a" style="position: relative; left: 0; top: 0; width: 200px; height: 300px; background-color: red; overflow-y: scroll">
		MENU A
	</div>
	<div id="b" style="position: relative; left: 200px; top: 0; width: 200px; height: 300px; background-color: blue">
		MENU B
	</div>
  </div>

위와 같이 overflow: hidden인 div 내에, absolute로 div를 넣으면 밖의 div 범위를 벗어나는 것도 firefox에서는 렌더링이 됩니다. 반면 IE에서는 되지 않고요.

어느 쪽이 표준에 부합하는건진 찾아봐도 잘 모르겠네요.

어쨌든 absolute element를 위와 같이 clip하고 싶은 경우엔 어떻게 해야하는지 궁금합니다.

감사합니다.

[겨미겨미]

wrap 디비전(overflow 속성을 hidden으로 선언한 디비전)의 position 속성을 relative로 주고, 자식 디비전의 position 속성을 absolute로 부여하면 됩니다.