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