องค์ประกอบการวางตำแหน่งบนหน้าเว็บด้วยคุณสมบัติตำแหน่ง CSS

เมษายน 19, 2024

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

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

ความกว้างและความสูงของเบราว์เซอร์
ตอนแรกคุณอาจคิดว่านี่หมายถึงหน้าต่างเบราว์เซอร์ที่เปิดอยู่ แต่มันหมายถึงเบราว์เซอร์ทั้งหมดรวมถึงปุ่มควบคุมและปุ่มต่างๆ
ความกว้างและความสูงแบบสด
นี่เป็นคำศัพท์สำหรับพื้นที่แสดงผลของเบราว์เซอร์ มันไม่รวมถึงการควบคุม
ความกว้างและความสูงของเอกสาร
นี่คือความกว้างและความสูงทั้งหมดของหน้าเว็บของคุณ หากขนาดเหล่านี้มีขนาดใหญ่กว่าความกว้างและความสูงแบบสดเบราว์เซอร์จะแสดงแถบเลื่อนตามต้องการ

ตอนนี้คุณรู้เงื่อนไขของขอบเขตที่คุณสามารถวางตำแหน่งส่วนต่างๆของหน้าเว็บของคุณโดยใช้ CSS แล้วมาดูที่ค่าตำแหน่งสี่ค่า

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

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

บทความก่อนหน้านี้

บทความถัดไป

บทความที่เกี่ยวข้อง

คอมพิวเตอร์

DS แว่นตา

เมษายน 2024

Spectrobes DS เป็นเกมแนวสวมบทบาท RPG ที่เกี่ยวข้องกับการรวบรวมและการต่อสู้ ดิสนีย์ทำสิ่งนี้และกราฟิกค่อนข้างน่าประทับใจ เรื่องราวพื้นฐานคือเด็กผู้ชายและเด็กผู้หญิงกำลังบินไปรอบ ๆ...

คอมพิวเตอร์

การสร้างแท็กของขวัญโดยใช้ Word

เมษายน 2024

แม่แบบนามบัตรที่ฉันใช้สำหรับโครงการนี้มาจาก Avery หลังจากดาวน์โหลดไฟล์จะเปิดขึ้นแสดงเลย์เอาต์ของนามบัตรสิบใบบนหน้า แท็บเทมเพลต Avery ปรากฏขึ้นหน้าแท็บหน้าแรกที่ด้านบนของหน้า แท็บเทมเพลต Avery...