Краткое изложение 4 методов, позволяющих сделать плавающий слой div, перемещение полосы прокрутки и положение неизменным

Автор：Eve Cole Время обновления：2025-03-03 19:48:02

Элемент div остается вверху, а полоса прокрутки прокручивается, но элемент div все еще находится вверху! Загрузите исходный код напрямую:

Способ первый:

Скопируйте код кода следующим образом:

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

<голова>

<title>Плавающий слой div, полоса прокрутки перемещается, сохраняя положение неизменным</title>

тело {фоновое изображение: URL (о: пустое); фоновое вложение: исправлено;}

#float{ширина:344px;высота:34px;border:1px Solid #C0DBF8;position:absolute;top:0px;}

</стиль>

</голова>

<тело>

</тело>

<тип сценария="текст/javascript">

вар IO=document.getElementById('float'),Y=IO,H=0,IE6;

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

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

если (IE6)

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

window.onscroll=функция (){

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?"":"fixed";

IO.fix=!IO.fix;

};

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

</скрипт>

</html>

Способ второй:

Скопируйте код кода следующим образом:

<дел>

</div>

Центрированный слой

<СТРОНГ> </div>

</body></STRONG>

Способ третий:

Скопируйте код кода следующим образом:

Центрированный слой

</div>

</тело>

Способ 4: [Используйте CSS для центрирования]

Скопируйте код кода следующим образом:

<!--

HTML, тело {высота: 100%; маржа: 0 пикселей; размер шрифта: 12 пикселей;}

.mydiv {

цвет фона: #f9fff6;

граница: сплошная 1 пиксель #009900;

выравнивание текста: по центру;

высота строки: 25 пикселей;

размер шрифта: 13 пикселей;

начертание шрифта: жирный;

z-индекс: 99;

ширина: 300 пикселей;

высота: 50 пикселей;

слева: 50%;/*FF IE7*/

верх:50%;/*FF IE7*/

Margin-left:-150px!important;/*FF IE7 — половина его ширины */

Margin-top:-60px!important;/*FF IE7 — половина его высоты*/

маржа-верх: 0 пикселей;

позиция: исправлена! важно;/*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(){

шоуДив();

}

</скрипт>

<!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>

</голова>

<тело>

<div id="popDiv" style="display:none;">Всегда посередине<br/>

</div>

</тело>

</html>