divフローティングレイヤー、スクロールバーの移動と位置をそのままにする4つの方法まとめ

著者：Eve Cole 更新時間：2025-03-03 19:48:02

div は一番上に残り、スクロールバーはスクロールしますが、div はまだ一番上にあります。ソースコードを直接アップロードします。

方法 1:

次のようにコードをコピーします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<頭>

<title>div フローティングレイヤ、スクロールバーは移動し、位置は変更されません</title>

body{背景画像:url(about:blank);背景添付ファイル:修正済み;}

#float{幅:344px;高さ:34px;ボーダー:1px ソリッド #C0DBF8;位置:絶対;トップ:0px;}

</スタイル>

</head>

<本文>

</body>

var IO=document.getElementById('float'),Y=IO,H=0,IE6;

IE6=window.ActiveXObject&&!window.XMLHttpRequest;

while(Y){H+=Y.offsetTop;Y=Y.offsetParent};

if(IE6)

IO.style.cssText="position:absolute;top:(this.fix?(document.documentElement.scrollTop-(this.javascript||"+H+")):0)";

window.onscroll=function(){

var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);

if(s>H&&IO.fix||s<=H&&!IO.fix)return;

if(!IE6)IO.style.position=IO.fix?"":"修正済み";

IO.fix=!IO.fix;

};

try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};

</script>

</html>

方法 2:

次のようにコードをコピーします。

を実装します。

<div>

</div>

中心レイヤー

</body></STRONG>

方法 3:

次のようにコードをコピーします。

中心レイヤー

</div>

</body>

方法4：【CSSを使って中央揃えする】

次のようにコードをコピーします。

<!--

html,body {高さ:100%; フォントサイズ:12px;}

.mydiv {

背景色: #f9fff6;

ボーダー: 1px ソリッド #009900;

テキスト整列: 中央;

行の高さ: 25px;

フォントサイズ: 13px;

フォントの太さ: 太字;

z インデックス:99;

幅: 300ピクセル;

高さ: 50ピクセル;

左:50%;/*FF IE7*/

トップ:50%;/*FF IE7*/

margin-left:-150px! important;/*FF IE7 の幅の半分 */

margin-top:-60px! important;/*FF IE7 の高さの半分*/

マージントップ:0px;

位置:固定!重要;/*FF IE7*/

位置:絶対;/*IE6*/

_top: 式(eval(document.compatMode &&

document.compatMode=='CSS1Compat') ?

documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

-->

</スタイル>

関数 showDiv(){

document.getElementById('popDiv').style.display='block';

}

window.onload=function(){

showDiv();

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<頭>

<title>常に中央の DIV (IE FF をサポート)</title>

</head>

<本文>

<div id="popDiv" style="display:none;">常に真ん中<br/>

</div>

</body>

</html>