หน้าต่างป๊อปอัปจะอยู่ตรงกลางเสมอ
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
var isIE=window.XMLHttpRequest?false:true;
var aIsIE={};
window.onload=ฟังก์ชั่น(){
ถ้า (คือ IE) {
window.onscroll=doIE;
window.onresize=doIE; }
ฟังก์ชั่น doIE(){
aIsIE.top=document.documentElement.scrollTop;
aIsIE.left=document.documentElement.scrollLeft;
ความกว้าง var=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;
var oDiv=document.getElementById("oneReply");
oDiv.style.top=aIsIE.top+(ความสูง-oDiv.offsetHeight)/2+'px';
oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px'; </script>
ก่อนอื่น ทุกคนจำเป็นต้องเข้าใจตำแหน่งสไตล์ css ที่เข้ากันไม่ได้: แก้ไข;
แอ็ตทริบิวต์ Position มีค่าทางเลือกสี่ค่า: คงที่, สัมบูรณ์, คงที่, สัมพันธ์กัน
เรามาเรียนรู้การใช้งานที่แตกต่างกันไปพร้อมๆ กัน ในระหว่างการศึกษาเราควรพิจารณาว่าควรใช้อันใดในสถานการณ์เค้าโครงใด
ตำแหน่ง:คงที่ ไม่มีตำแหน่ง ค่าคุณลักษณะนี้เป็นตำแหน่งเริ่มต้นขององค์ประกอบทั้งหมด ภายใต้สถานการณ์ปกติ เราไม่จำเป็นต้องประกาศมันโดยเฉพาะ แต่บางครั้งเมื่อเผชิญกับการสืบทอด เราไม่ต้องการเห็นผลกระทบของคุณลักษณะที่สืบทอดโดยองค์ประกอบ . เอง ดังนั้นคุณสามารถใช้ position:static เพื่อยกเลิกการสืบทอด ซึ่งก็คือ เรียกคืนค่าเริ่มต้นของการวางตำแหน่งองค์ประกอบ ตัวอย่างเช่น: #nav {position:static; } อีกสองอันที่ถูกกล่าวถึงก่อนหน้านี้คือค่าคงที่ของตำแหน่ง: คงที่ องค์ประกอบอยู่ในตำแหน่งที่คล้ายกันกับสัมบูรณ์ แต่บล็อกที่มีคือวิวพอร์ตเอง ในสื่อบนหน้าจอ เช่น เว็บเบราว์เซอร์ องค์ประกอบต่างๆ จะไม่เคลื่อนที่ในมุมมองเบราว์เซอร์ขณะที่เอกสารถูกเลื่อน ตัวอย่างเช่น ช่วยให้สามารถจัดวางสไตล์เฟรมได้ ในสื่อหน้าต่างๆ เช่น สิ่งพิมพ์ องค์ประกอบคงที่จะปรากฏที่ตำแหน่งเดียวกันในหน้าแรก สามารถใช้เพื่อสร้างชื่อเรื่องหรือเชิงอรรถที่ต่อเนื่องได้ เราได้เห็นเอฟเฟกต์ที่คล้ายกัน แต่ส่วนใหญ่ไม่สามารถทำได้ผ่าน CSS แต่ใช้สคริปต์ JS โปรดทราบว่า IE6 ไม่รองรับ...
ที่นี่เราใช้ตำแหน่ง:คงที่; + "เทคโนโลยีแฮ็ค" + "จาวาสคริปต์";
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/1999/xhtml/TR/xhtml/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tusheng วิศวกรส่วนหน้า</title>
< ประเภทสไตล์ = "ข้อความ/css">
เนื้อความ div {ระยะขอบ: 0; ช่องว่างภายใน: 0;}
#a{width:200px;height:200px;พื้นหลัง:สีน้ำเงิน;position:fixed;left:50%;top:50%;margin-left:-100px;margin-top:-100px;_position:absolute;}
</สไตล์>
<script type="text/javascript">
var isIE=window.XMLHttpRequest?false:true;
var aIsIE={};
window.onload=ฟังก์ชั่น(){
ถ้า (คือ IE) {
window.onscroll=doIE;
window.onresize=doIE; }
ฟังก์ชั่น doIE(){
aIsIE.top=document.documentElement.scrollTop;
aIsIE.left=document.documentElement.scrollLeft;
ความกว้าง var=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;
var oDiv=document.getElementById("a");
oDiv.style.top=aIsIE.top+(ความสูง-oDiv.offsetHeight)/2+'px';
oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px';< /script>
</หัว>
<ร่างกาย>
<div id="a"></div>
- br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/ <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</ /ร่างกาย>
</ /html>