position:fixedの基点
fixedのにおいての基点はabsoluteとは違い、同じ絶対配置でもその基点となるのは親の状況に関わらずウィンドウの左上の角です。基点となるのがウィンドウの左上角なので、スクロールしても常に同じように表示されている訳です。
で、その確認を。
<?php
function opt_filedate( $filename ) {
$cssdate = '';
if ( file_exists( $filename ) ) {
$cssdate = '?ver=' . date( 'YmdHis', filemtime( $filename ) );
}
return $cssdate;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>fixed test</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="index_fixed.css<?php echo opt_filedate( 'index_fixed.css' ); ?>" type="text/css" />
</head>
<body>
<div id="fixed_d"></div>//body直下
<div id="out_frame">//position指定着脱
<div id="fixed_a"></div>//out_frame直下
<div id="in_absolute">
<div id="fixed_b"></div>//abosolute指定直下
</div>
<div id="in_relative">
<div id="fixed_c"></div>//relative指定直下
</div>
</div>
</body>
</html>
最初のphp にある関数 opt_filedate() はスタイルシートファイルを更新した時にすぐにその変更を反映させるためのもの。詳しくはここに→『知らなくて損してたcssの更新をブラウザに確実に反映させる方法』
そしてそのcss。
body{
margin:0;
padding:0;
font-family:"verdana","courier","arial";
}
#out_frame{
position:relative;
margin-left:200px;
width:70%;
height:500px;
border:solid 1px red;
color:red;
}
#in_absolute{
position:absolute;
top:150px;
left:150px;
width:80%;
height:500px;
color:blue;
border:solid 1px blue;
}
#in_relative{
position:relative;
width:80%;
height:500px;
margin:100px;
color:green;
border:solid 1px green;
}
#fixed_a,#fixed_b,#fixed_c,#fixed_d{
position:fixed;
top:50px;
left:50px;
}
#fixed_a{
width:200px;
height:200px;
color:tomato;
border:dotted 2px tomato;
}
#fixed_b{
width:300px;
height:300px;
color:skyblue;
border:dotted 2px skyblue;
}
#fixed_c{
width:400px;
height:400px;
color:lime;
margin-left:50px;
border:dotted 2px lime;
}
#fixed_d{
width:500px;
height:500px;
color:purple;
border:dotted 2px purple;
}
使用したのはie11 とFireFox33.1.1。以下がieでの表示。FireFox でもほぼ同じ。
実線が親ボックス、点線がfixed が指定してあるdiv 要素。
body 直下の要素、bodyの子要素でrelative 指定のout_frame、またその子要素でabsolute 指定のin_absolute とrelative 指定のin_relative、それぞれの子要素としてfixed の指定してあるものすべてが同じ場所、ウインドーの左上を基点として絶対配置されています。
ここで試しにout_frame 要素のposition 設定をコメントアウトして無くして見ますと。
変化があったのはout_frame の子要素でposition にabsolute 指定のあるin_absolute だけ。absolute 指定の場合はrelative およびabsolute、fixed の指定がある直近の親要素の左上位置が基本になりますから、親要素のout_frame から指定が無くなるとbody 要素が基準となるためです。あとこれで知りましたが、in_absolute のwidth は％で設定していましたが、このwidth も位置と同じ様に影響を受けるという事。relative 指定の子要素in_relative にもfixed 指定のそれぞれの要素にも変化はありません。
そしてさらに、in_absolute のposition 指定を無くし、親要素のout_frame のposition 指定をabsolute に変えてみると、
in_relative はposition 指定をはずされたin_absolute に押しやられそれぞれが移動しますが、fixed 指定の子要素たちは全く変化がありません。
親要素がどう変わろうとその基点は全く変わらないという事です。
Post : 2013/07/18 15:39
Comments feed
Trackback URL : https://strix.main.jp/wp-trackback.php?p=36444