overflow:auto(scroll) 要素内の position:relative(absolute) 要素注意点

すぐ忘れるのでメモ

こう書くと・・・

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#a {
height: 80px;
overflow: auto;
}

#b {
position: relative;
border:solid 1px blue;
height: 50px;
}

#b span {
background: red;
position: absolute;
top: 30%;
left:50%;
}
</style>
</head>
<body>
<div id="a">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div id="b">div
<span>span</span>
</div>
</div>
</body>
</html>

IEの場合、#bが#aのコンテナの外に飛び出して表示されてしまう。

#aに position:relative を与えるとコンテナ内におさまる。
overflow:auto(scroll)のコンテナ内にposition:relative要素がある場合はコンテナもrelativeする必要がある。