overflowとposition

CSS

absolute

通常absolute(絶対配置)の基準はウィンドウの左上となるか、或いは親要素にstatic以外のボックスがある場合はそのボックスの左上が基準位置となる。


ただし、以下の条件の場合には意図した表示ができない。

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.parent{
	background:#eee;
	width:200px;
	height:200px;
	overflow:hidden;
	position:relative;
	z-index:1;
}
.child{
	background:#ccc;
	width:200px;
	height:200px;
	position:absolute;
	top:50px;
	left:50px;
	z-index:2;
}
-->
</style>
</head>
<body>
<div class="parent">
  <div class="child">絶対配置したい</div>
  <div class="hoge">floatされたボックス</div>
  <div class="fuga">floatされたボックス</div>
</div>
</body>
</html>
parentを基準にchildを絶対配置したい

「clearfix」目的のためにparentがoverflow:hiddenを指定されていると、意図した表示が出来なくなる。具体的には、parentのボックス領域からはみ出て表示されうる部分が隠されてしまう。

つまり、absoluteの基点となるボックスに対しては、clearfixの方法としてoverflow:hiddenはNG。


とりあえず事実関係としてのメモ。