ค่าคุณลักษณะสี่ประการของตำแหน่ง:
1.ญาติ
2.แน่นอน
3.แก้ไขแล้ว
4.คงที่
คุณลักษณะทั้งสี่นี้มีอธิบายไว้ด้านล่าง
<div id=parent> <div id=sub1>sub1</div> <div id=sub2>sub2</div></div>1.ญาติ
คุณลักษณะสัมพัทธ์นั้นค่อนข้างง่าย เราจำเป็นต้องค้นหาว่าวัตถุใดถูกชดเชยจาก คำตอบอยู่ที่ตำแหน่งของมัน ในโค้ดด้านบน sub1 และ sub2 มีความสัมพันธ์แบบพี่น้อง หากคุณตั้งค่าแอตทริบิวต์แบบสัมพันธ์ของ sub1 ให้ตั้งค่าโค้ด CSS ต่อไปนี้:
#sub1{ ตำแหน่ง: สัมพันธ์; ช่องว่างภายใน: 5px; ด้านบน: 5px;เราสามารถเข้าใจได้ว่าหากไม่ได้ตั้งค่าแอตทริบิวต์สัมพัทธ์ ตำแหน่งของ sub1 ควรอยู่ในตำแหน่งที่แน่นอนตามการไหลของเอกสารปกติ แต่เมื่อตำแหน่งของ sub1 ถูกตั้งค่าเป็นญาติก็จะถูกชดเชยตามตำแหน่งที่ควรจะเป็นตามค่าบน, ขวา, ล่างและซ้าย ความหมายสัมพัทธ์ของญาติก็สะท้อนให้เห็นเช่นกัน
สำหรับสิ่งนี้ คุณเพียงแค่ต้องจำไว้ว่า sub1 ควรอยู่ที่ไหนหากคุณไม่ได้ตั้งค่าความสัมพันธ์ และชดเชยจากตำแหน่งที่ควรเป็นเมื่อตั้งค่าแล้ว
คำถามต่อมาคือ ตำแหน่ง sub2 อยู่ที่ไหน? คำตอบคือตำแหน่งที่เคยเป็นมาก่อนและตอนนี้อยู่ที่ไหน ตำแหน่งจะไม่เปลี่ยนแปลงเนื่องจาก sub1 เพิ่มแอตทริบิวต์ตำแหน่ง
จะเกิดอะไรขึ้นหากตำแหน่งของ sub2 ถูกตั้งค่าให้สัมพันธ์กันในเวลานี้? ในเวลานี้ยังคงเป็นแบบเดียวกับ sub1 ออฟเซ็ตตามตำแหน่งเดิม
โปรดทราบว่าออฟเซ็ตสัมพัทธ์จะขึ้นอยู่กับด้านซ้ายบนของระยะขอบของวัตถุ
2.แน่นอนคุณสมบัตินี้ทำให้เข้าใจผิดอยู่เสมอ ว่ากันว่าเมื่อแอตทริบิวต์ตำแหน่งถูกตั้งค่าเป็นสัมบูรณ์ คุณลักษณะนั้นจะถูกวางตำแหน่งตามหน้าต่างเบราว์เซอร์เสมอ ซึ่งจริงๆ แล้วเป็นสิ่งที่ผิด อันที่จริงนี่คือลักษณะของคุณสมบัติคงที่
เมื่อตำแหน่งของ sub1 ถูกตั้งค่าเป็นสัมบูรณ์ ใครจะใช้เป็นวัตถุที่จะออฟเซ็ต? มีสองสถานการณ์ที่นี่:
(1) เมื่อวัตถุพาเรนต์ของ sub1 (หรือทวด ตราบใดที่มันเป็นออบเจ็กต์พาเรนต์) พาเรนต์ยังตั้งค่าแอตทริบิวต์ตำแหน่งด้วย และค่าแอตทริบิวต์ของตำแหน่งเป็นค่าสัมบูรณ์หรือค่าสัมพัทธ์ นั่นคือ ไม่ใช่ค่าเริ่มต้น จากนั้น sub1 ตามด้วยพาเรนต์นี้ใช้สำหรับการวางตำแหน่ง
โปรดทราบว่าถึงแม้วัตถุจะถูกกำหนดแล้ว แต่ก็มีรายละเอียดบางอย่างที่ต้องให้ความสนใจ นั่นคือจุดวางตำแหน่งของจุดบนสุดที่เราควรใช้เพื่อวางตำแหน่งนั้น หากพาเรนต์ตั้งค่าคุณลักษณะ เช่น ระยะขอบ เส้นขอบ การเติม ฯลฯ จุดการวางตำแหน่งนี้จะไม่สนใจการเติมและจะถูกวางตำแหน่งจากจุดเริ่มต้นของการเติม (นั่นคือ เริ่มต้นจากมุมซ้ายบนของการเติมเท่านั้น) นั่นคือการเพิกเฉยต่อช่องว่างภายใน แน่นอนว่าจะไม่ละเว้นระยะขอบและเส้นขอบ
คำถามต่อไปคือ ที่ตั้งของ sub2 อยู่ที่ไหน? เพราะเมื่อตำแหน่งถูกตั้งค่าเป็นสัมบูรณ์ จะทำให้ sub1 ล้นการไหลของเอกสารปกติ ราวกับว่ามันไม่ได้เป็นของพาเรนต์ มันจะลอยขึ้นไป เรียกว่าเลเยอร์ใน DreamWeaver แต่จริงๆ แล้วมีความหมายเหมือนกัน ในขณะนี้ sub2 จะได้รับตำแหน่ง sub1 และโฟลว์เอกสารจะไม่อิงตาม sub1 อีกต่อไป แต่เริ่มต้นโดยตรงจากพาเรนต์
(2) ถ้า sub1 ไม่มีวัตถุหลักที่มีคุณลักษณะตำแหน่ง ร่างกายจะถูกใช้เป็นวัตถุการวางตำแหน่งและตำแหน่งตามหน้าต่างเบราว์เซอร์ ซึ่งจะง่ายต่อการเข้าใจ
3. แก้ไขแล้วค่าคงที่คือค่าสัมบูรณ์พิเศษ นั่นคือ ค่าคงที่จะใช้เนื้อหาเป็นวัตถุวางตำแหน่งเสมอ และจะถูกวางตำแหน่งตามหน้าต่างเบราว์เซอร์ แม้ว่าจะลากแถบเลื่อนก็ตาม ตำแหน่งจะไม่เปลี่ยนแปลง คล้ายกับสิ่งที่แนบมากับพื้นหลัง: แก้ไขแล้ว
แน่นอนว่าดูเหมือนว่าจะไม่มีการสนับสนุนภายใต้ Dreamweaver
4. คงที่ค่าเริ่มต้นของตำแหน่ง โดยทั่วไป เมื่อไม่ได้ตั้งค่าแอตทริบิวต์ตำแหน่ง ก็จะถูกจัดเรียงตามการไหลของเอกสารปกติ
สรุปข้างต้นคือการใช้ตำแหน่งใน HTML ที่บรรณาธิการแนะนำ ฉันหวังว่าจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!