CSS Positioning (ตำแหน่ง)
บางครั้งการวางตำแหน่งที่ยุ่งยากมาก!
ตัดสินใจที่จะแสดงให้เห็นในหน้าขององค์ประกอบ!
องค์ประกอบสามารถซ้อนทับกัน!
ตำแหน่ง (ตำแหน่ง)
คุณสมบัติตำแหน่ง CSS ช่วยให้คุณสามารถค้นหาองค์ประกอบ นอกจากนี้ยังสามารถใช้เป็นองค์ประกอบในองค์ประกอบอื่นที่อยู่เบื้องหลังและระบุเนื้อหาองค์ประกอบมีขนาดใหญ่เกินไปสิ่งที่ควรจะเกิดขึ้น
องค์ประกอบที่สามารถนำมาใช้ที่ด้านบนด้านล่างด้านซ้ายและแอตทริบิวต์การวางตำแหน่งที่เหมาะสม แต่คุณสมบัติเหล่านี้จะไม่ทำงานจนกว่าตำแหน่งงานคุณสมบัติการตั้งค่าครั้งแรก พวกเขายังมีวิธีการที่แตกต่างกันของการทำงานขึ้นอยู่กับวิธีการวางตำแหน่ง
มีสี่วิธีการวางตำแหน่งที่แตกต่างกัน
การวางตำแหน่งแบบคงที่
องค์ประกอบ HTML เริ่มต้นที่ไม่ได้อยู่องค์ประกอบปรากฏในกระแสปกติ
องค์ประกอบตำแหน่งคงที่จะไม่ด้านบนด้านล่างซ้ายขวาอิทธิพล
ตำแหน่งคงที่
ตำแหน่งขององค์ประกอบสัมพันธ์กับหน้าต่างเบราว์เซอร์เป็นตำแหน่งที่คงที่
แม้ในขณะที่หน้าต่างถูกกลิ้งจะไม่ย้าย:
หมายเหตุ: การวางตำแหน่งถาวรใน IE7 และ IE8 คำอธิบาย DOCTYPE ต้องสนับสนุน!
ตำแหน่งประจำตำแหน่งขององค์ประกอบเอกสารที่เป็นอิสระจากการไหลและดังนั้นจึงไม่ใช้พื้นที่
คงองค์ประกอบตำแหน่งและองค์ประกอบอื่น ๆ ที่ทับซ้อนกัน
ตำแหน่งสัมพัทธ์
องค์ประกอบตำแหน่งญาติอยู่ในตำแหน่งเทียบกับตำแหน่งปกติ
ตัวอย่าง
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
ลอง»
คุณสามารถย้ายตำแหน่งสัมพัทธ์ขององค์ประกอบเนื้อหาและองค์ประกอบที่ทับซ้อนกันซึ่ง แต่เดิมครอบครองพื้นที่จะไม่เปลี่ยนแปลง
องค์ประกอบตำแหน่งญาติมักจะใช้เป็นภาชนะบล็อกองค์ประกอบตำแหน่งอย่างแน่นอน
ตำแหน่งแน่นอน
ตำแหน่งการวางตำแหน่งที่แน่นอนขององค์ประกอบที่สัมพันธ์กับองค์ประกอบหลักในตำแหน่งที่ใกล้ที่สุดถ้าองค์ประกอบที่ไม่ได้ตำแหน่งแล้วองค์ประกอบหลัก, ตำแหน่งเทียบกับ <html>:
ตำแหน่งที่แน่นอนเพื่อให้ตำแหน่งขององค์ประกอบเอกสารที่เป็นอิสระจากการไหลและดังนั้นจึงไม่ใช้พื้นที่
องค์ประกอบในตำแหน่งที่แน่นอนและองค์ประกอบอื่น ๆ ที่ทับซ้อนกัน
องค์ประกอบที่ทับซ้อนกัน
ปฐมนิเทศและเป็นอิสระจากองค์ประกอบเอกสารไหลเพื่อให้พวกเขาสามารถครอบคลุมองค์ประกอบอื่น ๆ บนหน้าเว็บ
แอตทริบิวต์ดัชนี z ระบุคำสั่งซ้อนขององค์ประกอบ (ซึ่งองค์ประกอบที่ควรจะวางอยู่ด้านหน้าหรือด้านหลัง)
องค์ประกอบสามารถมีคำสั่งสแต็คเชิงบวกหรือเชิงลบของการ:
องค์ประกอบมีคำสั่งซ้อนสูงขึ้นอยู่เสมอในด้านหน้าของคำสั่งที่ซ้อนล่างขององค์ประกอบ
หมายเหตุ: หากสององค์ประกอบในตำแหน่งที่ทับซ้อนไม่ได้ระบุ Z - ดัชนีตำแหน่งสุดท้ายขององค์ประกอบในรหัส HTML จะแสดงอยู่ด้านบน
ตัวอย่างเพิ่มเติม
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่ารูปทรงขององค์ประกอบ องค์ประกอบที่ถูกตัดเป็นรูปร่างนี้และแสดง
วิธีการใช้แถบเลื่อนเพื่อแสดงเนื้อหาของล้นองค์ประกอบภายใน
ตัวอย่างนี้แสดงให้เห็นถึงคุณสมบัติล้นในการสร้างแถบเลื่อนเมื่อเนื้อหาขององค์ประกอบในพื้นที่ที่กำหนดนั้นมีขนาดใหญ่เกินไปวิธีการตั้งค่าเพื่อรองรับ
วิธีการตั้งค่าเบราว์เซอร์ในการจัดการน้ำล้นโดยอัตโนมัติ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่าเบราว์เซอร์ในการจัดการน้ำล้นโดยอัตโนมัติ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเปลี่ยนเคอร์เซอร์
ทั้งหมดคุณสมบัติตำแหน่ง CSS
"CSS คอลัมน์" ระบุจำนวนที่ CSS (CSS1 หรือ CSS2) เวอร์ชั่นของความหมายของสถานที่ให้บริการ
| คุณสมบัติ | คำอธิบาย | ความคุ้มค่า | CSS |
|---|---|---|---|
| ก้น | ชดเชยการกำหนดเขตแดนระหว่างชายแดนอัตรากำไรขั้นต้นที่ลดลงและการวางตำแหน่งขององค์ประกอบประกอบด้วยบล็อกภายใต้ | รถยนต์ ความยาว % สืบทอด | 2 |
| คลิป | คลิปองค์ประกอบตำแหน่งอย่างแน่นอน | รูปร่าง รถยนต์ สืบทอด | 2 |
| เคอร์เซอร์ | เลื่อนเคอร์เซอร์ไปที่แสดงชนิดที่กำหนด | URL รถยนต์ เล็ง ผิดนัด ตัวชี้ ย้าย E-ปรับขนาด NE-ปรับขนาด NW-ปรับขนาด N-ปรับขนาด SE-ปรับขนาด SW-ปรับขนาด S-ปรับขนาด W-ปรับขนาด ข้อความ รอ ช่วย | 2 |
| ซ้าย | กำหนดองค์ประกอบการกำหนดเป้าหมายด้านซ้ายขอบชดเชยเขตแดนบล็อกระหว่างขอบด้านซ้ายของที่มีมัน | รถยนต์ ความยาว % สืบทอด | 2 |
| ล้น | เมื่อเนื้อหาขององค์ประกอบที่กำหนดสิ่งที่เกิดขึ้นเมื่อล้นภูมิภาค | รถยนต์ ซ่อนเร้น เลื่อน มองเห็นได้ สืบทอด | 2 |
| ล้น-Y | ระบุวิธีการจัดการเนื้อหาของขอบด้านบน / ด้านล่างของล้นองค์ประกอบพื้นที่เนื้อหา | รถยนต์ ซ่อนเร้น เลื่อน มองเห็นได้ ไม่มีการแสดงผล ไม่มีเนื้อหา | 2 |
| ล้น-X | ระบุวิธีการจัดการไปทางขวาขอบ / ซ้ายของพื้นที่เนื้อหาของล้นเนื้อหาองค์ประกอบ | รถยนต์ ซ่อนเร้น เลื่อน มองเห็นได้ ไม่มีการแสดงผล ไม่มีเนื้อหา | 2 |
| ตำแหน่ง | ระบุชนิดขององค์ประกอบการวางตำแหน่ง | แน่นอน คงที่ ญาติ คงที่ สืบทอด | 2 |
| ขวา | มันกำหนดองค์ประกอบการกำหนดเป้าหมายประกอบด้วยชายแดนและขอบขวาชดเชยระหว่างเส้นขอบด้านขวาของบล็อก | รถยนต์ ความยาว % สืบทอด | 2 |
| ด้านบน | มันกำหนดองค์ประกอบตำแหน่งที่ชายแดนและอัตรากำไรขั้นต้นของ บริษัท ในบล็อกที่มีการชดเชยระหว่างเขตแดน | รถยนต์ ความยาว % สืบทอด | 2 |
| ดัชนี z | การตั้งค่าเพื่อซ้อนขององค์ประกอบ | จำนวน รถยนต์ สืบทอด | 2 |