คุณสมบัติตำแหน่งใน CSS ใช้เพื่อกำหนดตำแหน่งขององค์ประกอบบนเพจ คุณสามารถวางแอตทริบิวต์ใดๆ ได้ทุกที่ที่คุณคิดว่าเหมาะสมผ่านคุณสมบัตินี้
คุณลักษณะตำแหน่งระบุประเภทการวางตำแหน่งขององค์ประกอบ คุณลักษณะนี้กำหนดกลไกการวางตำแหน่งที่ใช้เพื่อสร้างโครงร่างขององค์ประกอบ องค์ประกอบใดๆ สามารถวางตำแหน่งได้ แต่องค์ประกอบแบบสัมบูรณ์หรือแบบคงที่จะสร้างกล่องระดับบล็อก โดยไม่คำนึงถึงประเภทขององค์ประกอบนั้นเอง องค์ประกอบที่มีตำแหน่งค่อนข้างจะชดเชยจากตำแหน่งเริ่มต้นในโฟลว์ปกติ
แอตทริบิวต์ตำแหน่งระบุประเภทของวิธีการวางตำแหน่งที่ใช้กับองค์ประกอบ (คงที่ สัมพันธ์ คงที่ สัมบูรณ์ หรือเหนียว):
จริงๆ แล้วองค์ประกอบต่างๆ จะถูกจัดตำแหน่ง โดยใช้ คุณลักษณะด้านบน ล่าง ซ้ายและขวา อย่างไรก็ตาม คุณสมบัติเหล่านี้จะไม่มีผลใดๆ เว้นแต่จะมีการตั้งค่าคุณสมบัติตำแหน่งก่อน มันทำงานแตกต่างกันไปขึ้นอยู่กับมูลค่าตำแหน่ง
1. การวางตำแหน่งแบบคงที่: แบบคงที่
องค์ประกอบ HTML จะถูกวางตำแหน่งคงที่ตามค่าเริ่มต้น
องค์ประกอบที่มีตำแหน่งคงที่จะไม่ได้รับผลกระทบจากคุณลักษณะด้านบน ด้านล่าง ด้านซ้าย และด้านขวา
องค์ประกอบที่มีตำแหน่ง: คงที่ ไม่ได้อยู่ในตำแหน่งพิเศษใด ๆ โดยจะวางตำแหน่งตามโฟลว์ปกติของหน้าเสมอ:
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>div{height:100px;border:1pxsolidblack;}div.static{width:130px;height:50px;สีพื้นหลัง:#CCC;line-height:50px;text -align:center;position:static;top:50px;left:20px;}</style></head><body><div><divclass=static>item;</div></div></body ></html>ผลการวิ่ง:
2. ตำแหน่งสัมพัทธ์: ญาติ
ตัวอย่าง:
<html><head><styletype=text/css>#item1{width:100px;height:100px;พื้นหลัง-สี:สีเขียว;}#item2{width:100px;height:100px;พื้นหลัง-สี:สีแดง;}< /style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div></body></html>ผลการวิ่ง:
หากคุณเปลี่ยนไฟล์สไตล์ CSS ในโค้ดดังนี้:
<html><head><styletype=text/css>#item1{width:100px;height:100px;สีพื้นหลัง:สีเขียว;}#item2{width:100px;height:100px;สีพื้นหลัง:สีแดง;ตำแหน่ง: สัมพันธ์;ซ้าย:20px;ด้านบน:20px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div ></ร่างกาย></html>ผลการวิ่ง:
สรุป: ญาติเป็นการชดเชยที่สัมพันธ์กับตำแหน่งของการไหลของเอกสารปกติ ตำแหน่งที่ถูกครอบครองเดิมยังคงอยู่ ซึ่งหมายความว่าจะไม่ส่งผลกระทบต่อตำแหน่งขององค์ประกอบที่ตามมา ซ้ายหมายถึงออฟเซ็ตสัมพันธ์กับด้านขวาของตำแหน่งเดิม และด้านบนหมายถึงออฟเซ็ตสัมพันธ์กับด้านล่างของตำแหน่งเดิม เมื่อซ้ายและขวาพร้อมกัน มีเพียงซ้ายเท่านั้นที่ถูกต้อง ออฟเซ็ตสัมพัทธ์จะขึ้นอยู่กับด้านซ้ายบนของระยะขอบของวัตถุ
3. ตำแหน่งที่แน่นอน: แน่นอน
ตัวอย่าง:
<html><head><styletype=text/css>#item1{width:100px;height:100px;สีพื้นหลัง:สีเขียว;}#item2{width:100px;height:100px;สีพื้นหลัง:สีแดง;}# เนื้อหา{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div ></div></body></html>ผลการวิ่ง:
เมื่อแก้ไขไฟล์สไตล์ css:
<html><head><styletype=text/css>#item1{width:100px;height:100px;สีพื้นหลัง:สีเขียว;}#item2{width:100px;height:100px;สีพื้นหลัง:สีแดง;ตำแหน่ง: แน่นอน;ซ้าย:20px;top:20px;}#content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>item2</div></div></body></html>ผลการวิ่ง:
จะเห็นได้ว่าเมื่อค่าแอตทริบิวต์ตำแหน่งขององค์ประกอบหลักเป็นค่าเริ่มต้น (คงที่) ค่าสัมบูรณ์จะถูกวางตำแหน่งให้สัมพันธ์กับหน้าต่างเบราว์เซอร์
หากค่าของแอตทริบิวต์ตำแหน่งเนื้อหาถูกตั้งค่าเป็นค่าที่ไม่ใช่ค่าเริ่มต้น ดังนั้นค่าสัมบูรณ์จะถูกวางตำแหน่งให้สัมพันธ์กับองค์ประกอบหลัก:
<html><head><styletype=text/css>#item1{width:100px;height:100px;สีพื้นหลัง:สีเขียว;}#item2{width:100px;height:100px;สีพื้นหลัง:สีแดง;ตำแหน่ง: แน่นอนซ้าย:20px;top:20px;}#content{margin-left:100px;margin-top:100px;position:relative}</style></head><body><divid=content><divid=item1 >item1</div><divid=item2>item2</div></div></body></html>ผลการวิ่ง:
แก้ไขสไตล์ CSS ต่อไป:
<html><head><styletype=text/css>#item1{width:100px;height:100px;สีพื้นหลัง:สีเขียว;}#item2{width:100px;height:100px;สีพื้นหลัง:สีแดง;}# เนื้อหา{margin-left:100px;margin-top:100px;position:absolute;padding:20px;border:10pxsolidblack;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>item2</div></div></body></html>ผลการวิ่ง:
คุณสังเกตเห็นการเปลี่ยนแปลงหรือไม่ เมื่อตั้งค่า div ภายนอกเป็นสัมบูรณ์ ความกว้างของ div ภายนอกจะเปลี่ยนจาก 100% เป็นอัตโนมัติ
เมื่อคุณตั้งค่าคุณสมบัติตำแหน่งขององค์ประกอบเป็นแบบสัมบูรณ์หรือคงที่ สามสิ่งจะเกิดขึ้น:
(1) ย้ายองค์ประกอบหนึ่งเลเยอร์ไปยังทิศทางแกน Z องค์ประกอบไม่อยู่ในการไหลปกติ ดังนั้นจึงไม่ใช้พื้นที่ของเลเยอร์เดิมอีกต่อไป และจะครอบคลุมองค์ประกอบของชั้นล่าง
(2) องค์ประกอบจะกลายเป็นองค์ประกอบระดับบล็อก ซึ่งเทียบเท่ากับการตั้งค่า display: block; สำหรับองค์ประกอบ (ให้องค์ประกอบแบบอินไลน์ เช่น <span> และหลังจากการตั้งค่าสัมบูรณ์ คุณจะพบว่าสามารถตั้งค่า ความกว้างและความสูง)
(3) หากองค์ประกอบเป็นองค์ประกอบระดับบล็อก ความกว้างขององค์ประกอบจะเปลี่ยนจากความกว้างเดิม: 100% (ครอบครองหนึ่งบรรทัด) เป็นอัตโนมัติ
4. ตำแหน่งคงที่: คงที่
การวางตำแหน่งคงที่คือการวางตำแหน่งองค์ประกอบที่สัมพันธ์กับหน้าต่างเบราว์เซอร์ องค์ประกอบที่ใช้การวางตำแหน่งคงที่จะไม่เคลื่อนที่เนื่องจากการเลื่อนของหน้าต่างเบราว์เซอร์ ราวกับว่าได้รับการแก้ไขบนหน้าเว็บ หน้า สามารถทำได้โดยใช้ตำแหน่งคงที่
ตัวอย่าง:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; ความสูง:200px;ความกว้าง:200px;}</style></head><body><divclass=outstyle=position:relative;><divclass=instyle=พื้นหลัง-สี:ข้าวสาลี;></div><divclass=instyle =สีพื้นหลัง:สีแดง;ตำแหน่ง:คงที่;ซ้าย:20px;ด้านล่าง:10px;></div><divclass=instyle=สีพื้นหลัง:สีน้ำเงิน;></div></div></body></ html>ผลการวิ่ง:
5. ตำแหน่งที่เหนียว: เหนียว
การวางตำแหน่งแบบติดหนึบแตกต่างจากวิธีการวางตำแหน่งทั้งสี่วิธีที่แนะนำไปก่อนหน้านี้ เหมือนกับการผสมผสานระหว่างการวางตำแหน่งแบบสัมพันธ์และการวางตำแหน่งแบบคงที่ จะปรากฏขึ้นอีกครั้ง ตัวอย่างเช่น เมนูการนำทางในหน้าเว็บบางหน้าอยู่ในตำแหน่งเริ่มต้นเมื่อโหลดหน้าเว็บ และจะได้รับการแก้ไขที่ด้านบนของหน้าเมื่อเราเลื่อนลง
ตัวอย่าง:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; ความสูง:200px;ความกว้าง:250px;}</style></head><body><divclass=out><divclass=instyle=พื้นหลัง-สี:ข้าวสาลี;></div><divclass=instyle=พื้นหลังสี: สีแดง;></div><divclass=instyle=พื้นหลัง-สี:สีฟ้า;></div></div></body></html>ผลการวิ่ง:
