การกำหนดตำแหน่งแบบสัมบูรณ์ด้วย CSS

Kar Kahnd Tahaenng Baeb Samburn Dwy Css



ตำแหน่งขององค์ประกอบ HTML มีบทบาทสำคัญในการจัดระเบียบส่วนประกอบของหน้าเว็บ โดยเฉพาะอย่างยิ่ง ตำแหน่งขององค์ประกอบสามารถปรับได้โดยใช้ CSS “ ตำแหน่ง ' คุณสมบัติ. คุณสมบัตินี้สามารถเชื่อมโยงกับคุณสมบัติออฟเซ็ต เช่น คุณสมบัติด้านบน ซ้าย ขวา และด้านล่าง โดยให้ค่าเฉพาะเพื่อปรับองค์ประกอบบนเพจ อย่างไรก็ตาม ' แน่นอน ” องค์ประกอบตำแหน่งสามารถปรับได้เมื่อเทียบกับองค์ประกอบตำแหน่งที่ใกล้ที่สุด

โพสต์นี้จะอธิบายการวางตำแหน่งแบบสัมบูรณ์ของ CSS







คุณสมบัติ 'ตำแหน่ง' ของ CSS

ตำแหน่ง สามารถใช้คุณสมบัติ ” ใน CSS เพื่อปรับตำแหน่งขององค์ประกอบ ค่าต่างๆ ของคุณสมบัติตำแหน่งเป็นแบบคงที่ แบบสัมบูรณ์ แบบสัมพัทธ์ แบบคงที่ และแบบเหนียว ค่าเหล่านี้ถูกกำหนดด้วยคุณสมบัติออฟเซ็ต เช่น บน ขวา ซ้าย และล่าง เพื่อปรับตำแหน่งขององค์ประกอบ



จะใช้ CSS Absolute Positioning ได้อย่างไร?

การวางตำแหน่งสัมบูรณ์ขององค์ประกอบสามารถใช้ได้โดยใช้ CSS “ ตำแหน่ง ”ทรัพย์สินมีค่า” แน่นอน '. องค์ประกอบที่มีตำแหน่งสัมบูรณ์จะถูกปรับให้สอดคล้องกับองค์ประกอบหลักในตำแหน่งที่ใกล้ที่สุด แต่ถ้าบรรพบุรุษไม่ได้อยู่ในตำแหน่ง มันจะปรับให้สัมพันธ์กับส่วนเนื้อหาของเอกสาร



ตัวอย่าง





มาทำความเข้าใจกับแนวคิดด้วยตัวอย่างที่ใช้งานได้จริง

ขั้นตอนที่ 1: สร้างไฟล์ HTML



ในไฟล์ HTML ภายในองค์ประกอบ body ให้เพิ่ม div ที่มีชื่อคลาสว่า “ หลัก '. จากนั้น ภายใน div ที่สร้างขึ้น ให้เพิ่มแท็ก HTML ที่เชื่อมโยงกับแอตทริบิวต์ต่อไปนี้:

    • src ” ให้ลิงค์ไปยังรูปภาพ
    • ระดับ ” ใช้ใน CSS เพื่อจัดรูปแบบองค์ประกอบ
    • ทุกอย่าง แอตทริบิวต์ ” ระบุข้อความที่แสดงแทนรูปภาพหากโหลดรูปภาพบนหน้าไม่สำเร็จ
    • ทุกอย่าง แอตทริบิวต์ ” ระบุข้อความที่แสดงในหน้าแทนรูปภาพหากรูปภาพไม่สามารถโหลดบนหน้า

จากนั้นเพิ่ม div อื่นที่มีองค์ประกอบ h1 และ p ของส่วนหัวและย่อหน้า:

< แผนก ระดับ = 'หลัก' >
< แผนก ระดับ = 'เนื้อหา' >
< img src = 'images/linuxlogo.png' ระดับ = 'บ้าน' ทุกอย่าง = 'โลโก้ลินุกซ์' ความกว้าง = '80px' >
< h1 > การวางตำแหน่งแบบสัมบูรณ์ของ CSS h1 >
< หน้า > สวัสดีทีม Linuxint ! หน้า >
แผนก >
แผนก >


ใน CSS มีการใช้คุณสมบัติสไตล์หลายอย่างเพื่อตกแต่งองค์ประกอบ HTML

ขั้นตอนที่ 2: จัดรูปแบบองค์ประกอบ 'ทั้งหมด'

* {
ตระกูลแบบอักษร: Verdana, Geneva, Tahoma, sans-serif;
}


องค์ประกอบ HTML มีสไตล์โดยใช้ ' ครอบครัวแบบอักษร ”ทรัพย์สินมีค่า” เวอร์ดานา เจนีวา ตาโฮมา ซานเซอริฟ '. รายการค่านี้ช่วยให้แน่ใจว่าหากเบราว์เซอร์ไม่รองรับสไตล์แรก ก็จะใช้อีกสไตล์หนึ่ง

ขั้นตอนที่ 3: สไตล์ div “บ้าน”

.บ้าน {
ตำแหน่ง: แน่นอน;
ด้านบน: 50px;
ซ้าย: 45px;
}


ด้านล่างนี้เป็นคุณสมบัติที่ใช้กับ “ บ้าน ” ดิฟ:

    • ตำแหน่ง ” คุณสมบัติกำหนดตำแหน่งขององค์ประกอบ ที่นี่เพิ่ม ' แน่นอน ” จะวางองค์ประกอบที่สัมพันธ์กับส่วนเนื้อหาของ HTML
    • สูงสุด คุณสมบัติ ” ใช้สำหรับการปรับแนวตั้งขององค์ประกอบ
    • ซ้าย คุณสมบัติ ” ใช้สำหรับการปรับแนวนอนขององค์ประกอบ

ขั้นตอนที่ 4: สไตล์ div “เนื้อหา”

.เนื้อหา {
สีพื้นหลัง: cadetblue;
ความกว้าง: 300px;
ความสูง: 250px;
ช่องว่างภายในซ้าย: 40px;
ขอบซ้าย: 80px;
}


ด้านล่างนี้เป็นคุณสมบัติของ CSS ที่นำไปใช้กับ ' เนื้อหา ” ดิฟ:

    • สีพื้นหลัง คุณสมบัติ ” กำหนดสีพื้นหลังขององค์ประกอบ
    • ความกว้าง ” คุณสมบัติกำหนดความกว้างขององค์ประกอบ
    • ความสูง คุณสมบัติ ” กำหนดความสูงขององค์ประกอบ
    • ช่องว่างภายในซ้าย คุณสมบัติ ” ถูกตั้งค่าเพื่อเพิ่มช่องว่างทางด้านซ้ายของเนื้อหาขององค์ประกอบ
    • ขอบซ้าย คุณสมบัติ ” ระบุช่องว่างทางด้านซ้ายขององค์ประกอบ

ณ จุดนี้ หน้าเว็บของเราจะมีลักษณะดังนี้:


จะเห็นได้จากผลลัพธ์ด้านบนว่ารูปภาพของบ้าน div อยู่ที่ 50px จากด้านบนและ 45px จากด้านซ้ายของเนื้อหาของเอกสาร ยิ่งไปกว่านั้น ตำแหน่งของ div หลักจะถูกตั้งค่าให้สัมพันธ์กับส่วน body ของ HTML

จะปรับตำแหน่งขององค์ประกอบ 'สัมพันธ์' กับตำแหน่งองค์ประกอบหลักได้อย่างไร

ส่วนนี้จะแนะนำคุณเกี่ยวกับการปรับตำแหน่งขององค์ประกอบเทียบกับองค์ประกอบหลักตำแหน่งที่ใกล้ที่สุด

ตั้งค่าคุณสมบัติ “ตำแหน่ง” ของส่วน “เนื้อหา”

ตำแหน่ง: ญาติ;


หากต้องการปรับตำแหน่งขององค์ประกอบให้สัมพันธ์กับองค์ประกอบหลัก ให้ตั้งค่า “ ตำแหน่ง ” คุณสมบัติขององค์ประกอบพาเรนต์ถึง “ ญาติ ' ค่า.

ตั้งค่าคุณสมบัติ 'ตำแหน่ง' ขององค์ประกอบ 'img'

.บ้าน {
ตำแหน่ง: แน่นอน;
ด้านบน: 100px;
ซ้าย: 220px;
}


ที่นี่:

    • ตำแหน่ง ” คุณสมบัติที่มีค่าที่กำหนดเป็น “ แน่นอน ” จะถูกจัดตำแหน่งให้สัมพันธ์กับองค์ประกอบหลัก (นั่นคือ ตำแหน่ง div ของเนื้อหาจะถูกตั้งค่าด้วยค่าที่สัมพันธ์กัน)
    • สูงสุด คุณสมบัติ ” ใช้สำหรับกำหนดตำแหน่งองค์ประกอบจากด้านบน
    • ซ้าย คุณสมบัติ ” ใช้สำหรับกำหนดตำแหน่งองค์ประกอบจากด้านซ้าย

เอาต์พุต


จะเห็นได้จากผลลัพธ์ว่ารูปภาพถูกจัดตำแหน่งให้สัมพันธ์กับ div หลัก และดูเหมาะสม

บทสรุป

ซีเอสเอส “ ตำแหน่ง คุณสมบัติ ” ใช้เพื่อกำหนดตำแหน่งขององค์ประกอบ HTML คุณสมบัตินี้สามารถกำหนดมูลค่าเป็นค่าคงที่ สัมพัทธ์ สัมบูรณ์ เหนียว และคงที่ “ แน่นอน ค่า ” จะวางตำแหน่งองค์ประกอบที่สอดคล้องกับองค์ประกอบหลักที่อยู่ใกล้เคียง โพสต์นี้ได้อธิบายการวางตำแหน่งแบบสัมบูรณ์ของ CSS พร้อมตัวอย่างที่ใช้งานได้จริง