Blockdit Logo (Mobile)
KESANA
•
12 พ.ย. 2023 เวลา 13:14 • การศึกษา

เขียน position,static,relative,Absolute css

นี่คือข้อมูลบางส่วนเกี่ยวกับคุณสมบัติของตำแหน่งและค่าของมัน คงที่ สัมพันธ์ สัมบูรณ์ ใน CSS
คุณสมบัติตำแหน่งใน CSS ใช้เพื่อควบคุมตำแหน่งขององค์ประกอบบนหน้าเว็บ มีค่าสี่ค่าที่สามารถใช้กับคุณสมบัตินี้ได้: คงที่, สัมพันธ์, สัมบูรณ์ และคงที่
คงที่: นี่คือค่าเริ่มต้นสำหรับองค์ประกอบทั้งหมด และหมายความว่าองค์ประกอบนั้นอยู่ในตำแหน่งตามโฟลว์ปกติของหน้า คุณสมบัติด้านบน ขวา ล่าง และซ้ายไม่มีผลกับองค์ประกอบที่มีตำแหน่งคงที่
สัมพันธ์กัน: ค่านี้วางตำแหน่งองค์ประกอบโดยสัมพันธ์กับตำแหน่งปกติในโฟลว์เพจ องค์ประกอบสามารถย้ายได้โดยใช้คุณสมบัติด้านบน ขวา ล่าง และซ้าย แต่จะยังคงใช้พื้นที่เดิมในโฟลว์หน้า องค์ประกอบอื่นๆ จะถูกวางตำแหน่งราวกับว่าองค์ประกอบสัมพัทธ์ยังคงอยู่ในตำแหน่งเดิม
สัมบูรณ์: ค่านี้วางตำแหน่งองค์ประกอบโดยสัมพันธ์กับตำแหน่งระดับบนสุดที่มีตำแหน่งใกล้เคียงที่สุด เช่น องค์ประกอบระดับบนสุดที่มีค่าตำแหน่งเป็นแบบสัมพัทธ์ แบบสัมบูรณ์ หรือคงที่ หากไม่มีตำแหน่งบรรพบุรุษ องค์ประกอบนั้นจะมีตำแหน่งสัมพันธ์กับองค์ประกอบเนื้อหา องค์ประกอบที่มีตำแหน่งที่แน่นอนจะถูกนำออกจากโฟลว์ของหน้าปกติ และไม่ส่งผลกระทบต่อตำแหน่งขององค์ประกอบอื่นๆ
คงที่: ค่านี้คล้ายกับค่าสัมบูรณ์ แต่องค์ประกอบนั้นอยู่ในตำแหน่งที่สัมพันธ์กับวิวพอร์ต เช่น หน้าต่างเบราว์เซอร์ แทนที่จะเป็นองค์ประกอบบรรพบุรุษ องค์ประกอบคงที่ยังคงอยู่ในตำแหน่งเดิมแม้ว่าผู้ใช้จะเลื่อนหน้าก็ตาม
ตัวอย่างวิธีใช้คุณสมบัติตำแหน่งกับค่าสัมพัทธ์
div {
position: relative;
top: 10px;
left: 20px;
}
ตัวอย่างนี้ เราได้เลือกองค์ประกอบ
ทั้งหมดและจัดตำแหน่งองค์ประกอบให้สัมพันธ์กับตำแหน่งปกติ นอกจากนี้เรายังได้ย้ายพวกมันลง 10 พิกเซลและไปทางขวา 20 พิกเซลโดยใช้คุณสมบัติด้านบนและซ้าย
โดยรวมแล้ว คุณสมบัติตำแหน่งและค่าของมันมีความสำคัญต่อการควบคุมเค้าโครงและตำแหน่งขององค์ประกอบบนหน้าเว็บ ด้วยการใช้ค่าเหล่านี้และคุณสมบัติด้านบน ขวา ล่าง และซ้าย เราสามารถสร้างโครงร่างเพจที่ซับซ้อนและไดนามิกได้
โฆษณา