ดูการ Float แบบอิสระแล้ว คราวนี้ลองมาดูการ Float แบบอ้างอิงตำแหน่งจาก Element ก่อนหน้ากันบ้างครับ เช่น การจับ div tags เข้าไปรวมกลุ่มกันใน a div tag (ถ้าผมอ้างถึงอะไรที่มากกว่า 1 ผมจะเติม s ตามท้ายเสมอนะครับ อิอิ) หรือการ จับ divs ยัดเข้าไปใน div ครับ คล้ายๆ กับการวางเลย์เอ๊าท์ แต่ตอนนี้ให้ดูแค่ลักษณะการ float อย่างเดียวกันก่อนครับ
อย่างไร ไปดูตัวอย่างกันเลยดีกว่าครับ
ผมจะสร้าง divs มา 4 ตัว โดย div ที่ใช้เป็น ตัวหลักนั้นจะใช้ id ในการอ้างถึงและจัดรูปแบบ ส่วนอีก 3 อันที่เหลือใช้ class ในการกำหนดรูปแบบการแสดงผลครับ
ดีมากๆครับ บทความ กำลังสยสัยหลายเรื่องเลยพอเจอเว็บนี้ แล้วใช่เลย
position:inherit ไว้ทำอะไรหรอครับ?
position:inherit; ในที่นี้มีค่าเท่ากับ position:relative;
จริงๆ หมายถึงว่า มันจะเอาค่า position จาก parent ของมันมาใช้นั่นเอง ซึ่งตอนนี้ parent ของมันก็คือ #main คือ position:relative
บางทีอาจจะไม่ต้องใส่ก็ได้ ผมก็ไม่ค่อยได้ใส่เท่าไหร่ อย่าง float;none; ก็เช่นเดียวกัน เพราะบางทีมันเป็นค่า default อยู่แล้วครับ
ผมก็ยังงงๆระหว่าง relative กับ inherit อยู่อะคับ รวมถึง absolute ด้วย คือเจ้า relative กับ inherit เนี่ยมันจะวัดจาก parent มันใช่มะคับ แล้ว absolute เนี่ย มันวัดจาก body ของเอกสาร
ผมเข้าใจถูกปะเนี่ย??? :P
ชอบการทำรูปประกอบจัง……ชัดเจนดี….
มองภาพออกเลย….
ผมมาหาคำตอบ ขอบคุณครับ
คือผมว่า อย่างนี้มั้งคับ
ถ้าเรากำหนด absolute ให้ element ใดๆ
สามารถอ้างอิงตำแหน่งได้ 2 กรณี คือ
1.หาก parent ของมันกำหนดเป็น relative มันจะอ้างจาก parent
2.หาก parent ไม่มีการกำหนดเป็น relative มันจะอ้างค่าจาก ขอบของbrowser เลยคับไม่ขึ้นกับใคร
ส่วนinherit ก็ไม่น่างงนะครับ เหมอืน parent มันไงครับ ถ้าparent เป็น absoluteมันก็เป็น absolute ถ้า parent เป็น relative มันก็เป็น relative แล้วถ้า parent เป็น inherit ขึ้นมาเราคงต้องไปดูปู่มัน(grand-parent)
หะๆๆคือ ดูparent ของ parent อีกที
ขยายเรื่องนี้กต้องไปอ่าน ทฤษฎี OOP แล้วจะเข้าใจครับ อิอิ