[css] เมื่อ position:absolute ไปทับลิงค์
posted on 07 Nov 2009 16:46 by rije in Knowledgeเป็นกันไหมครับ? เวลาเราอยากให้อะไรก็ตาม ไม่ว่าจะภาำพ ข้อความใน div ที่เราใส่คำสั่ง position:absolute เอาไว้ เพื่อจะให้มันอยู่ตรงส่วนไหนก็ได้บนหน้าเพจของเรา แต่ก็ดันมีปัญหา เมื่อมันไปทับลิงค์ (หรือส่วนอื่นๆ) ทำให้เรากดลิงค์นั้นไม่ได้ๆ ทั้งๆ ที่ก็เห็นๆ กันอยู่ แต่กดไม่ได้
วันนี้ริจจี้ขอไขปัญหาจัดการกับมันซะให้อยู่หมัด!!! (ฮา) กับเจ้า absolute เจ้าปัญหานี้
=================================
ตัวอย่างปัญหา
ตัวรูปรถเป็น div ภาพพื้นหลังโดยใส่ position:absolute
ส่วนลิงค์ถูกภาพทับอยู่ (เนื่องจากภาพความกว้าง 100% ทับลิงค์แน่นอน แต่ผมให้แสดงภาพไว้ทางขวามือเท่านั้น จึงไม่เห็นว่าภาพทับลิงค์อยู่ครับ)
ปัญหา : เวลาเอาเมาท์ไปชี้ที่ลิงค์จะไม่เกิดอะไรขึ้นครับ จะเป็นสีม่วงอยู่ตลอดเวลา ทำอะไรไม่ได้เลย ลากครอบก็ไม่ได้ กดลิงค์ไม่ได้
วิธีแก้ปัญหา : แก้ที่ css ในส่วนของ a:link , a:visited โดยใส่คำสั่งต่อไปนี้ลงไป
position: relative;
จากนั้นลอง refresh ดูครับก็จะแก้ปัญหานี้ได้
ภาพหลังจากแก้ปัญหาแล้ว
หลังจากที่แก้ไขแ้ล้ว ก็ชี้ที่ลิงค์ได้แล้วล่ะครับ จะเห็นว่าลิงค์ที่ตั้งค่าเมื่อชี้จะเปลี่ยนเป็นสีขาว
=================================
หากมีปัญหาที่ส่วนอื่นก็ลองเอาคำสั่งนี้ไปใช้นะครับ จะเห็นว่าง่ายๆ เนอะ แค่คำสั่งบรรทัดเดียวเองก็จัดการได้แล้ว ผมก็เขียนซะยาวยืด อธิบายแล้วงงไหมครับเนี่ย 555+
ขอให้ css อยู่คู่คุณตลอดไป โอ้วเย่!
