ملخص 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>

<نمط النوع = "نص/CSS">

الجسم {خلفية الصورة: URL (حول: فارغ)؛ مرفق الخلفية: ثابت؛}

#float{width:344px;height:34px;border:1px Solid #C0DBF8;position:absolute;top:0px;}

</نمط>

</الرأس>

<الجسم>

</الجسم>

<نوع البرنامج النصي = "نص/جافا سكريبت">

var 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=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؟"":"fixed";

IO.fix=!IO.fix;

};

حاول {document.execCommand("BackgroundImageCache",false,true)}catch(e){};

</script>

</html>

الطريقة الثانية:

انسخ رمز الكود كما يلي:

<ديف>

</div>

طبقة مركزية

<قوي> </div>

</body></سترونج>

الطريقة الثالثة:

انسخ رمز الكود كما يلي:

طبقة مركزية

</div>

</الجسم>

الطريقة الرابعة: [استخدم CSS للتوسيط]

انسخ رمز الكود كما يلي:

<نمط النوع = "نص/CSS">

<!--

html,body {الارتفاع: 100% الهامش: 0px;

.ميديف {

لون الخلفية: #f9fff6؛

الحدود: 1 بكسل صلب #009900؛

محاذاة النص: مركز؛

ارتفاع الخط: 25 بكسل؛

حجم الخط: 13 بكسل؛

وزن الخط: غامق؛

مؤشر ض: 99؛

العرض: 300 بكسل؛

الارتفاع: 50 بكسل؛

اليسار:50%;/*FF IE7*/

أعلى:50%;/*FF IE7*/

الهامش الأيسر:-150 بكسل!مهم;/*FF IE7 نصف عرضه */

الهامش العلوي:-60px!مهم;/*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>

</الرأس>

<الجسم>

<div id="popDiv" style="display:none;">في المنتصف دائمًا

</div>

</الجسم>

</html>