การวางตำแหน่ง CSS เป็นส่วนสำคัญในการสร้างเค้าโครงเว็บไซต์ แม้จะมีการเพิ่มขึ้นของเทคนิคการจัดรูปแบบ CSS เช่น Flexbox และ CSS Grid การวางตำแหน่งก็ยังคงเป็นจุดสำคัญในเว็บเบราเซอร์ของนักออกแบบเว็บ
เมื่อใช้การจัดตำแหน่ง CSS สิ่งแรกที่คุณต้องทำคือตั้งค่าคุณสมบัติ CSS เพื่อบอกเบราว์เซอร์ว่าคุณต้องการใช้ตำแหน่งที่แน่นอนหรือตำแหน่งสัมพัทธ์สำหรับองค์ประกอบที่กำหนดหรือไม่ นอกจากนี้คุณต้องเข้าใจความแตกต่างระหว่างคุณสมบัติการกำหนดตำแหน่งทั้งสองนี้ด้วย
ในขณะที่ความสัมพันธ์แบบสัมพัทธ์และสัมพัทธ์เป็นคุณสมบัติ CSS อันดับสองที่ใช้บ่อยที่สุดในการออกแบบเว็บมีจริงสี่สถานะในตำแหน่งคือ
- คงที่
- แน่นอน
- ญาติ
- คงที่
การจัดตำแหน่งแบบคงที่
Static คือตำแหน่งดีฟอลต์สำหรับองค์ประกอบใด ๆ บนเว็บเพจ หากคุณไม่ได้กำหนดตำแหน่งขององค์ประกอบมันจะเป็นแบบคงที่ซึ่งหมายความว่าจะแสดงบนหน้าจอตามตำแหน่งที่อยู่ในเอกสาร HTML และวิธีแสดงภายในการไหลปกติของเอกสารนั้น
หากคุณใช้กฎการวางตำแหน่งเช่น ด้านบน หรือ ซ้าย กับองค์ประกอบที่มีตำแหน่งคงที่กฎเหล่านี้จะถูกละเลยและองค์ประกอบยังคงอยู่ในตำแหน่งที่ปรากฏในการไหลของเอกสารตามปกติ คุณไม่ค่อยหากจำเป็นต้องตั้งองค์ประกอบให้เป็นตำแหน่งแบบคงที่ใน CSS เพราะเป็นค่าเริ่มต้น
ตำแหน่ง CSS แน่นอน
ตำแหน่งที่แน่นอนอาจเป็นตำแหน่งที่ง่ายที่สุดในการเข้าใจ CSS คุณเริ่มต้นด้วยคุณสมบัติตำแหน่ง CSS นี้:
ตำแหน่ง: สัมบูรณ์
ค่านี้บอกเบราว์เซอร์ว่าควรวางตำแหน่งใด ๆ ออกจากการไหลปกติของเอกสารแทนที่จะวางไว้ในตำแหน่งที่แน่นอนบนหน้าเว็บ นี่คำนวณจากบรรพบุรุษที่ไม่ใช่แบบสถิตที่ใกล้เคียงที่สุดขององค์ประกอบ เนื่องจากองค์ประกอบที่วางตำแหน่งอย่างแน่นอนจะถูกนำออกจากการไหลปกติของเอกสารจะมีผลต่อองค์ประกอบที่อยู่ก่อนหน้าหรือหลังใน HTML อยู่ในตำแหน่งบนหน้าเว็บ ตัวอย่างเช่นถ้าคุณมีส่วนที่อยู่ในตำแหน่งที่ใช้ค่าของญาติและภายในส่วนนั้นคุณมีย่อหน้าที่คุณต้องการกำหนดตำแหน่ง 50 พิกเซลจากด้านบนสุดของส่วนคุณจะเพิ่มมูลค่าตำแหน่งของ แน่นอน ไปยังย่อหน้านั้นพร้อมกับค่าออฟเซ็ตของ 50px บน ด้านบน คุณสมบัติเช่นนี้: ตำแหน่ง: สัมบูรณ์ด้านบน: 50px;
องค์ประกอบที่วางตำแหน่งอย่างนี้จะแสดงพิกเซล 50 พิกเซลจากส่วนบนสุดของส่วนที่วางตำแหน่งไม่ว่าจะอยู่ในกระแสใดก็ตาม องค์ประกอบตำแหน่งที่แน่นอนจะใช้ตำแหน่งที่ค่อนข้างเหมาะสมเป็นบริบทและค่าตำแหน่งที่คุณใช้มีความสัมพันธ์กับตำแหน่งนั้น สี่คุณสมบัติการระบุตำแหน่งที่คุณสามารถใช้ ได้แก่ คุณสามารถใช้อย่างใดอย่างหนึ่ง ด้านบน หรือ ด้านล่าง - เนื่องจากองค์ประกอบไม่สามารถวางตำแหน่งได้ตามทั้งสองค่านี้ - และอย่างใดอย่างหนึ่ง ขวา หรือ ซ้าย. หากองค์ประกอบถูกตั้งค่าเป็นตำแหน่งสัมบูรณ์ แต่ไม่มีบรรพบุรุษที่ไม่อยู่ในทางสรีปแล้วจะมีตำแหน่งเทียบกับองค์ประกอบของร่างกายซึ่งเป็นองค์ประกอบระดับสูงสุดของหน้า การวางตำแหน่งสัมพัทธ์ใช้ตำแหน่งสี่ตำแหน่งเดียวกันกับการวางตำแหน่งที่แน่นอน แต่แทนที่จะวางตำแหน่งขององค์ประกอบไว้ใกล้กับบรรพบุรุษที่ไม่อยู่ในตำแหน่งแบบสแตติกจะเริ่มต้นจากตำแหน่งที่องค์ประกอบจะอยู่ในสถานะปกติ ตัวอย่างเช่นถ้าคุณมีวรรคสามบนเว็บเพจและที่สามมี ตำแหน่ง: ญาติ สไตล์วางไว้ตำแหน่งนี้จะชดเชยตามตำแหน่งปัจจุบัน วรรค 1 วรรค 2 ย่อหน้าที่ 3 ในตัวอย่างข้างต้นวรรคสามอยู่ในตำแหน่ง 2EM จากด้านซ้ายขององค์ประกอบคอนเทนเนอร์ แต่ยังคงอยู่ต่ำกว่าสองย่อหน้าแรก มันยังคงอยู่ในกระแสปกติของเอกสารและชดเชยเล็กน้อย ถ้าคุณเปลี่ยนไป ตำแหน่ง: สัมบูรณ์, สิ่งใดก็ตามที่ปรากฏอยู่ด้านบนของมันเพราะมันไม่ได้อยู่ในการไหลปกติของเอกสาร องค์ประกอบในเว็บเพจมักใช้เพื่อกำหนดค่า ตำแหน่ง: ญาติ ไม่มีค่าออฟเซ็ตซึ่งหมายความว่าองค์ประกอบยังคงอยู่ในตำแหน่งที่ปรากฏในกระแสปกติ นี้จะทำเพียงเพื่อสร้างองค์ประกอบที่เป็นบริบทที่องค์ประกอบอื่น ๆ สามารถวางตำแหน่งอย่างแน่นอน ตัวอย่างเช่นถ้าคุณมีส่วนที่ล้อมรอบเว็บไซต์ของคุณทั้งหมดด้วยค่าคลาส ภาชนะซึ่งเป็นสถานการณ์ทั่วไปในการออกแบบเว็บแผนกดังกล่าวสามารถตั้งค่าเป็นตำแหน่งได้ ญาติ เพื่อให้ทุกอย่างภายในของมันสามารถใช้เป็นบริบทตำแหน่ง ตำแหน่งคงที่เป็นจำนวนมากเช่นตำแหน่งแน่นอน ตำแหน่งขององค์ประกอบถูกคำนวณในลักษณะเดียวกับรูปแบบสัมบูรณ์ แต่องค์ประกอบคงที่จะถูกกำหนดไว้ในตำแหน่งนั้นซึ่งเกือบจะเหมือนกับลายน้ำ ทุกสิ่งทุกอย่างที่อยู่บนหน้าเว็บจะเลื่อนไปที่ส่วนนั้น เมื่อต้องการใช้ค่าคุณสมบัตินี้คุณต้องตั้งค่า: ตำแหน่ง: คงที่;
โปรดทราบเมื่อคุณแก้ไของค์ประกอบในไซต์ของคุณแล้วโฆษณาจะพิมพ์ในตำแหน่งนั้นเมื่อพิมพ์หน้าเว็บของคุณ ตัวอย่างเช่นหากองค์ประกอบของคุณได้รับการแก้ไขที่ด้านบนของหน้าเว็บจะปรากฏที่ด้านบนสุดของหน้าเว็บที่พิมพ์ทุกหน้าเนื่องจากมีการแก้ไขที่ด้านบนสุดของหน้าเว็บ คุณสามารถใช้ชนิดสื่อสิ่งพิมพ์เพื่อเปลี่ยนรูปแบบของหน้ากระดาษที่พิมพ์ออกมาได้: หน้าจอ @media { h1 # first {position: fixed; } } @media print { h1 # first {position: static; } }
ตำแหน่งสัมพัทธ์
สิ่งที่เกี่ยวกับตำแหน่งคงที่?
