ตัวอย่าง:
2. ตำแหน่ง : สัมบูรณ์ ตำแหน่งสัมบูรณ์:1. ไม่มีตำแหน่ง: สัมบูรณ์ (หรือญาติ) บนชั้นนอก; จากนั้น DIV จะอยู่ในตำแหน่งที่สัมพันธ์กับเบราว์เซอร์ดังที่แสดงในรูปด้านล่าง (50 พิกเซลจากเส้นขอบด้านขวาของเบราว์เซอร์และ 20 พิกเซลจากเส้นขอบล่าง)
2. ชั้นนอกมีตำแหน่ง: สัมบูรณ์ (หรือญาติ); จากนั้น DIV จะอยู่ในตำแหน่งที่สัมพันธ์กับเส้นขอบชั้นนอกดังแสดงในรูปด้านล่าง (50 พิกเซลจากเส้นขอบด้านขวาของ D และ 20 พิกเซลจากขอบล่างของ D)
ตัวอย่าง:
3. ตำแหน่ง : ญาติ ตำแหน่งสัมพัทธ์:ดังที่แสดงในรูปด้านล่างมันจะคงที่เมื่อเทียบกับตำแหน่งที่แน่นอนของ DIV ที่มี div นี้ หากชั้นนอกไม่มีของเขามันจะได้รับการแก้ไขเมื่อเทียบกับเบราว์เซอร์
ตัวอย่าง:
4. เลเยอร์ ( z-index ) การเลเยอร์ ใน ทิศทาง z -axis สามารถเข้าใจได้ว่าแบ่งออกเป็นกองกระดาษและยิ่งจำนวนเลเยอร์ที่สูงขึ้นในตัวอย่างด้านบนเราเห็นว่า AA ครอบคลุม A เนื่องจากระดับการแสดงผลของรหัสในภายหลังนั้นสูงกว่าดังนั้นจะครอบคลุม AA โดยไม่ต้องเปลี่ยนลำดับของรหัสได้อย่างไร ดังนี้:
ตัวอย่าง:
5. ลอย : ซ้าย ขวา เมื่อ ซ้าย และ ขวา คุณไม่จำเป็นต้องระบุตำแหน่ง ( ซ้าย และ บน ) แต่มันสัมพันธ์โดยตรงกับเบราว์เซอร์ หากด้านนอกถูกห่อไว้ ด้านซ้ายบนหรือบนขวาของตำแหน่งของแถวที่ถูกลบ เมื่อเทียบกับ DIV ภายนอก จะปรากฏขึ้น เพิ่มเติม: 1. ล้น: ซ่อน; // ซ่อนเกินส่วน; สกรอลล์แสดงแถบเลื่อน<div>/div> // ตัดทอนการไหล
2. เคอร์เซอร์: รูปร่างของเมาส์ตัวชี้เมื่อมันชี้ไปที่มัน;
3. เอฟเฟกต์โปร่งแสง:
<div class = box> พื้นที่โปร่งใส <Div>
รหัสในสไตล์ชีทคือ:
.กล่อง
-
ความทึบ: 0.5; -moz-opacity: 0.5; ตัวกรอง: อัลฟ่า (ความทึบ = 50)
-
เพื่อสรุปตัวอย่างการปฏิบัติ: ส่วนหนึ่งของรูปแบบเค้าโครงของเว็บไซต์ Adva
รหัส HTML: XML/HTML รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด