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

สวัสดีชาวโลก! ในเนื้อหานี้ เราจะพยายามดึงแนวคิดของหนึ่งในหัวข้อที่ยากและสำคัญที่สุดใน CSS

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

คุณสมบัติตำแหน่งที่ใช้กันอย่างแพร่หลายใน CSS มีดังนี้:

ตำแหน่งคงที่:

เมื่อองค์ประกอบ HTML ถูกกำหนดด้วยstaticตำแหน่ง คุณสมบัติตำแหน่งต่างๆ เช่นleft, right, topและbottomจะไม่ทำงาน องค์ประกอบในเอกสาร HTML มีตำแหน่งคงที่ตามค่าเริ่มต้น

มาคัดลอกและวางโค้ดด้านล่างใน IDE เพื่อดูว่าเกิดอะไรขึ้น

เมื่อเพิ่มคุณสมบัติตำแหน่งให้staticกับ id ตัวเลือกDiv2เราเห็นว่าตำแหน่งของDiv2กล่องไม่เปลี่ยนแปลง ดังนั้นเราจึงสามารถสรุปองค์ประกอบที่มีตำแหน่งที่staticไม่ได้รับผลกระทบจากleft, right, topหรือbottomคุณสมบัติ

ตำแหน่งสัมพัทธ์:

เมื่อองค์ประกอบได้รับมอบหมายกับตำแหน่งrelativeคุณสมบัติตำแหน่งชอบleft, right, top และมีผลกระทบต่อตำแหน่งขององค์ประกอบในหน้าเว็บที่เกี่ยวข้องกับตำแหน่งปกติมันเป็นbottomstatic

ให้คัดลอกและวางโค้ดด้านล่างเพื่อDiv2เลือกเพื่อแทนที่คุณสมบัติตำแหน่งก่อนหน้า

#Div2 {
        position: relative;
        left: 20px;
        top: 50px;
      }

ตำแหน่งคงที่:

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

ให้คัดลอกและวางโค้ดด้านล่างเพื่อทราบความแตกต่าง

หลังจากเลื่อนดูเราจะเห็นว่า id Div2ได้รับการแก้ไขที่มุมบนสุดของเอกสาร

ตำแหน่งที่แน่นอน:

เช่นเดียวfixedกับabsoluteตำแหน่ง คุณสมบัติตำแหน่งจะลบตัวเลือกออกจากโฟลว์ เมื่อองค์ประกอบถูกลบออกจากตำแหน่งปกติ องค์ประกอบหลักจะไม่ถือว่าเป็นองค์ประกอบลูกอีกต่อไป องค์ประกอบจะสัมพันธ์กับเอกสาร

มาคัดลอกและวางโค้ดด้านล่างเพื่อดูว่าabsoluteตำแหน่งส่งผลต่อองค์ประกอบอย่างไร

เราจะเห็นว่าองค์ประกอบที่มี ID Div2กลายเป็นที่แน่นอนที่จะเป็นองค์ประกอบที่ผู้ปกครองมี overallid มาปรับแต่งโค้ดเพื่อดูว่าองค์ประกอบที่มีabsoluteตำแหน่งทำงานอย่างไรหากไม่มีองค์ประกอบหลักที่มีstaticค่าตำแหน่งที่ไม่ใช่

#overall {
        background-color: orange;
        border: solid;
        /* position: relative; */
        font-family: monospace;
        font-size: 3rem;
      }

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