,

,

,

- แท็ก
มักใช้ในเลย์เอาต์ของเว็บไซต์สมัยใหม่เพื่อสร้างกริดและหมายถึงบล็อกหรือคอนเทนเนอร์บางประเภท นอกจากนี้ยังสามารถซ้อนแท็กอื่นๆ ไว้ในนั้นได้ ซึ่งไม่สามารถทำได้กับองค์ประกอบบล็อกทั้งหมด ดังนั้น
สะดวกในการใช้งาน โดยปกติแล้วบล็อกจะซ้อนกันและไม่ได้แทรกลงในองค์ประกอบแบบอินไลน์ องค์ประกอบอินไลน์ HTML คือข้อความ และใช้ CSS เพื่อจัดรูปแบบ
เมื่อกำหนดความกว้างของเนื้อหา ความกว้างของบล็อกทั้งหมดคือผลรวมของค่าการเติมด้านขวาและด้านซ้าย ระยะขอบ เส้นขอบ และความกว้าง ที่ความสูงที่กำหนด - จากช่องว่างด้านบนและด้านล่าง ระยะขอบ เส้นขอบ และความสูง ข้อความในองค์ประกอบบล็อกจะถูกจัดแนวตามค่าเริ่มต้น หากหนึ่งในนั้นมีองค์ประกอบแบบอินไลน์ร่วมกับองค์ประกอบบล็อก บล็อกที่ไม่ระบุชื่อจะถูกสร้างขึ้นรอบๆ องค์ประกอบแบบอินไลน์ สไตล์เริ่มต้นจะถูกนำไปใช้กับมัน นอกจากนี้ยังจะสืบทอดสไตล์ที่ระบุซึ่งกำหนดให้กับพาเรนต์ด้วย
การไหลของเอกสาร
Flow หมายถึงลำดับการแสดงองค์ประกอบของหน้า ซึ่งกำหนดโดยคุณสมบัติที่ระบุใน CSS ในกรณีนี้ ตามค่าเริ่มต้น บล็อกจะเรียงจากบนลงล่าง และหากมีพื้นที่ไม่เพียงพอ แท็กอินไลน์จะถูกย้ายไปยังบรรทัดใหม่และจัดเรียงจากบนลงล่างและจากซ้ายไปขวา ตำแหน่งขององค์ประกอบบนเพจขึ้นอยู่กับตำแหน่งขององค์ประกอบในโค้ด ยิ่งตำแหน่งสูงเท่าใด ก็จะยิ่งอยู่เร็วขึ้นเท่านั้น แต่ละองค์ประกอบบล็อกดูเหมือนสี่เหลี่ยมที่ผลักเพื่อนบ้านออกไป คุณสามารถเปลี่ยนลักษณะการทำงานนี้ได้โดยใช้คุณสมบัติพิเศษ การจัดแนวบล็อกบางส่วนให้อยู่กึ่งกลางหรือด้านข้างของคอนเทนเนอร์ใน CSS เรียกว่าการวางตำแหน่ง
องค์ประกอบการวางตำแหน่ง
การวางตำแหน่งของบล็อกสามารถควบคุมได้โดยใช้การวางตำแหน่งแบบสัมบูรณ์และแบบสัมพัทธ์ การวางตำแหน่งจะใช้เพื่อให้ส่วนใหญ่ของหน้ามีตำแหน่งเฉพาะ เพื่อสร้างอินเทอร์เฟซที่ซับซ้อน ป๊อปอัป และองค์ประกอบตกแต่ง คุณสมบัติหลักที่ใช้ในการวางตำแหน่งบล็อกใน CSS คือตำแหน่ง มีคุณสมบัติหลักสี่ประการ:
• ญาติ;
• แน่นอน;
• ที่ตายตัว;
• คงที่
ด้วยความช่วยเหลือ คุณสามารถสลับโหมดเค้าโครงได้โดยระบุพารามิเตอร์หนึ่งในสี่ตัว: บน ขวา ล่าง หรือซ้าย นอกจากนี้ยังมีคุณสมบัติสำหรับการสั่งซื้อเลเยอร์ - z-index โดยปกติแล้วการวางตำแหน่งด้วยคุณสมบัติคงที่จะไม่ถูกใช้เนื่องจากจะระบุถึงการวางตำแหน่งเริ่มต้นของบล็อก ดังนั้นการใช้พารามิเตอร์ใดๆ จึงไม่ส่งผลกระทบแต่อย่างใด คุณสมบัติอีกสามประการอื่นใช้สำหรับโครงร่าง: แบบสัมพัทธ์ แบบสัมบูรณ์ แบบคงที่
การวางตำแหน่งสัมพัทธ์
การวางตำแหน่งสัมพัทธ์ของบล็อกใน CSS เช่น ตำแหน่ง: คุณสมบัติสัมพัทธ์ หมายความว่าองค์ประกอบสามารถย้ายได้และตำแหน่งเดิมมีการเปลี่ยนแปลง บล็อกดังกล่าวยังคงอยู่ในกระแส อันที่จริงไม่ใช่ตัวเขาเองที่ถูกแทนที่ แต่เป็นสำเนาของเขา ค่าคุณสมบัติถูกตั้งค่าเพื่อระบุจำนวนบล็อกที่จะเคลื่อนที่ไปในทิศทางเดียวหรืออีกทางหนึ่ง ส่วนใหญ่มักวัดเป็นพิกเซล แต่สามารถใช้หน่วยอื่นได้

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

ตำแหน่งที่แน่นอน
ตำแหน่งที่แน่นอนของบล็อกใน CSS ถูกกำหนดโดยค่าของคุณสมบัติตำแหน่งที่แน่นอน องค์ประกอบที่อยู่ในตำแหน่งจะไม่อยู่ในโฟลว์เอกสารอย่างแน่นอน และบล็อกที่อยู่ติดกันจะเข้ามาแทนที่ ความกว้างขององค์ประกอบดังกล่าวจะถูกขยายขึ้นอยู่กับเนื้อหาและสามารถเลื่อนได้โดยการตั้งค่าคุณสมบัติบางอย่างบน, ซ้าย, ขวา, ล่าง การวางตำแหน่งบล็อกแบบสัมบูรณ์ใน CSS มีประโยชน์สำหรับส่วนหัว แต่ตำแหน่ง: สัมบูรณ์ไม่ได้ทำงานเฉพาะกับองค์ประกอบบล็อกเท่านั้น แต่ยังรวมถึงองค์ประกอบแบบอินไลน์ด้วย
การจัดองค์ประกอบให้อยู่ตรงกลาง
องค์ประกอบอินไลน์ที่อยู่ในตำแหน่งจะทำงานเหมือนกับองค์ประกอบอินไลน์ทุกประการ ดังนั้น การวางตำแหน่งยังสามารถใช้เพื่อควบคุมข้อความใน CSS ได้ด้วย คุณสามารถใช้คุณสมบัติใหม่บางอย่างได้ เช่น เปลี่ยนความสูงและความกว้าง การจัดกึ่งกลางและแนวตั้งใน CSS ใช้คุณสมบัติหลายอย่างรวมกัน ควบคุมการจัดตำแหน่งแนวตั้งของคุณสมบัติด้านบน หากคุณต้องการจัดบล็อกให้อยู่ตรงกลางใน CSS คอนเทนเนอร์หลักควรอยู่ในตำแหน่งที่ค่อนข้างเหมาะสม และองค์ประกอบที่จัดชิดควรอยู่ในตำแหน่งที่แน่นอน คอนเทนเนอร์จำเป็นต้องตั้งค่าคุณสมบัติด้านบน: 50% และหากต้องการย้ายองค์ประกอบตามความสูงครึ่งหนึ่งของตัวเอง ให้ใช้คุณสมบัติการแปลที่มีค่า "0, -50%" องค์ประกอบที่มีตำแหน่งที่แน่นอนสามารถแยกแยะได้เป็นประเภทใหม่ เนื่องจากคุณสมบัติที่ไม่พร้อมใช้งานสำหรับการวางตำแหน่งประเภทอื่นจะถูกนำไปใช้กับองค์ประกอบเหล่านั้น

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

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

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

ตำแหน่งคงที่
ความหมายอื่นได้รับการแก้ไข คุณสมบัติตำแหน่งจะยึดองค์ประกอบไว้ที่ตำแหน่งเฉพาะ การวางตำแหน่งคงที่มักใช้เพื่อสร้างเมนูใน CSS มันคล้ายกับค่าสัมบูรณ์ แต่บล็อกคงที่หลุดออกจากโฟลว์ แม้ว่าจะเลื่อนหน้า องค์ประกอบดังกล่าวจะยังคงอยู่ ดังนั้นจึงสะดวกในการใช้เพื่อสร้างเมนูใน CSS จุดเริ่มต้นจะเชื่อมโยงกับหน้าต่างเบราว์เซอร์ หากมีบล็อกหลายตำแหน่ง คุณสมบัติ z-index จะถูกใช้เพื่อเรียงลำดับ ด้วยความช่วยเหลือ คุณสามารถซ้อนทับบล็อกสัมพัทธ์กับบล็อกสัมบูรณ์ได้ หากคุณให้ดัชนีที่เกี่ยวข้องซึ่งแสดงเป็นจำนวนเต็ม ยิ่งมีขนาดใหญ่เท่าใด บล็อกก็จะยิ่งสูงขึ้นเท่านั้น
ปัจจุบันนี้ นักพัฒนาเว็บสามารถสร้างเค้าโครงหน้าเว็บที่ซับซ้อนได้โดยใช้เทคนิค CSS ต่างๆ เทคนิคเหล่านี้บางส่วนมีประวัติอันยาวนาน (ลอย) เทคนิคอื่นๆ (flexbox) ได้รับความนิยมในช่วงไม่กี่ปีที่ผ่านมา
ในบทความนี้ เราจะมาดูสิ่งที่รู้เล็กๆ น้อยๆ เกี่ยวกับการวางตำแหน่ง CSS โดยละเอียดยิ่งขึ้น
ก่อนที่เราจะเริ่มต้น เรามาทบทวนพื้นฐานของตำแหน่งประเภทต่างๆ กันก่อน
ภาพรวมของวิธีการกำหนดตำแหน่งที่ใช้ได้
คุณสมบัติตำแหน่ง CSS กำหนดประเภทของการวางตำแหน่งขององค์ประกอบ
ตัวเลือกการวางตำแหน่ง
static เป็นค่าคุณสมบัติการกำหนดตำแหน่งเริ่มต้น เราขอแนะนำว่าองค์ประกอบนี้ไม่ใช้การวางตำแหน่ง - การวางตำแหน่งจะใช้เฉพาะเมื่อคุณระบุประเภทการวางตำแหน่งอื่นที่ไม่ใช่ค่าเริ่มต้น
ในการทำเช่นนี้ คุณต้องตั้งค่าคุณสมบัติตำแหน่งเป็นค่าใดค่าหนึ่งต่อไปนี้:
• ญาติ
• แน่นอน
• ที่ตายตัว
• เหนียว
และหลังจากตั้งค่าตำแหน่งแล้วเท่านั้น คุณสามารถใช้คุณสมบัติที่ชดเชยองค์ประกอบได้:
• ขวา
• ด้านล่าง
• ค่าเริ่มต้นของคุณสมบัติเหล่านี้คือคำสำคัญอัตโนมัติ
ควรคำนึงว่าหากองค์ประกอบมีคุณสมบัติตำแหน่งที่ตั้งค่าเป็นสัมบูรณ์หรือคงที่ แสดงว่าองค์ประกอบนั้นมีตำแหน่งที่แน่นอน นอกจากนี้ คุณสมบัติดัชนี z เริ่มทำงานสำหรับองค์ประกอบที่มีตำแหน่ง ซึ่งจะกำหนดลำดับการเรียงซ้อน
ความแตกต่างระหว่างวิธีการวางตำแหน่งหลัก
ตอนนี้เรามาดูความแตกต่างพื้นฐานสามประการระหว่างประเภทตำแหน่งที่ใช้ได้:
• องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอน (สัมบูรณ์) จะถูกลบออกจากสตรีมโดยสมบูรณ์ เพื่อนบ้านที่ใกล้ที่สุดจะเข้ามาแทนที่
• ตำแหน่งที่ค่อนข้าง (ญาติ) และติดกาว (เหนียว) ยังคงรักษาตำแหน่งไว้ในกระแสน้ำและเพื่อนบ้านที่ใกล้ที่สุดไม่ได้ครอบครอง อย่างไรก็ตาม การเสริมองค์ประกอบเหล่านี้ไม่ใช้พื้นที่ แต่องค์ประกอบอื่นๆ จะละเลยไปโดยสิ้นเชิง และอาจส่งผลให้องค์ประกอบทับซ้อนกันได้
• องค์ประกอบคงที่ (และการวางตำแหน่งคงที่เป็นประเภทสัมบูรณ์) จะถูกวางตำแหน่งโดยสัมพันธ์กับพื้นที่การมองเห็นเสมอ (โดยไม่สนใจการมีอยู่ของตำแหน่งในบรรพบุรุษ) ในขณะที่องค์ประกอบที่ติดหนึบจะถูกวางตำแหน่งโดยสัมพันธ์กับบรรพบุรุษที่ใกล้ที่สุดด้วยการเลื่อน (โอเวอร์โฟลว์: อัตโนมัติ) และเฉพาะในกรณีที่ไม่มีบรรพบุรุษดังกล่าวเท่านั้นที่พวกเขาจะอยู่ในตำแหน่งที่สัมพันธ์กับโซนการมองเห็น
คุณสามารถดูรายละเอียดเพิ่มเติมได้ในการสาธิต:
หมายเหตุ: การวางตำแหน่งองค์ประกอบ Sticky ยังคงเป็นเทคโนโลยีทดลองที่มีการรองรับอย่างจำกัดในเบราว์เซอร์ แน่นอน หากคุณต้องการ คุณสามารถใช้ polyfill เพื่อเพิ่มฟังก์ชันนี้ให้กับเบราว์เซอร์ได้ แต่ด้วยความแพร่หลายที่ต่ำ คุณสมบัตินี้จะไม่ถูกกล่าวถึงในบทความ
องค์ประกอบการวางตำแหน่งด้วยประเภทการวางตำแหน่งแบบสัมบูรณ์
ฉันแน่ใจว่าคนส่วนใหญ่รู้ว่าการวางตำแหน่งแบบสัมบูรณ์ทำงานอย่างไร อย่างไรก็ตาม มีหลายสิ่งที่อาจทำให้ผู้เริ่มต้นสับสนได้
ดังนั้นฉันจึงตัดสินใจเริ่มต้นด้วยการอธิบายคุณลักษณะของการวางตำแหน่งที่ไม่ค่อยมีใครรู้จัก
ดังนั้น องค์ประกอบที่มีตำแหน่งที่แน่นอนจะถูกชดเชยโดยสัมพันธ์กับองค์ประกอบบรรพบุรุษที่อยู่ในตำแหน่งที่ใกล้ที่สุด แน่นอนว่าวิธีนี้ใช้ได้ผลหากบรรพบุรุษคนใดมีตำแหน่งอื่นที่ไม่ใช่แบบคงที่ หากองค์ประกอบไม่มีบรรพบุรุษที่มีตำแหน่ง องค์ประกอบนั้นจะถูกชดเชยโดยสัมพันธ์กับพื้นที่ที่มองเห็นได้
สิ่งนี้แสดงให้เห็นได้จากตัวอย่างต่อไปนี้:
ในการสาธิตนี้ บล็อกสีเขียวถูกวางตำแหน่งในตอนแรกโดยสมบูรณ์โดยมีช่องว่างภายในเป็นศูนย์ด้านล่าง:0 และซ้าย:0 บรรพบุรุษของบล็อกนั้น (บล็อกสีแดง) ไม่ได้ถูกวางตำแหน่งเลย
อย่างไรก็ตาม เราได้วางตำแหน่งเสื้อคลุมด้านนอกไว้ค่อนข้างมาก (องค์ประกอบที่มีคลาสจัมโบตรอน) สังเกตว่าตำแหน่งของบล็อกสีเขียวเปลี่ยนแปลงไปอย่างไรเมื่อประเภทการวางตำแหน่งของบรรพบุรุษเปลี่ยนแปลงไป
องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะละเว้นคุณสมบัติ float
หากเราใช้การวางตำแหน่งแบบสัมบูรณ์หรือแบบคงที่กับองค์ประกอบแบบลอย คุณสมบัติ float จะถูกตั้งค่าเป็น none ในทางกลับกัน ถ้าเราตั้งค่าการวางตำแหน่งที่สัมพันธ์กัน องค์ประกอบจะยังคงลอยอยู่
ดูการสาธิตที่เกี่ยวข้อง:
ในตัวอย่างนี้ เรากำหนดองค์ประกอบที่แตกต่างกันสองรายการที่ลอยไปทางขวา โปรดทราบว่าเมื่อบล็อกสีแดงอยู่ในตำแหน่งที่แน่นอน บล็อกจะละเว้นค่าของคุณสมบัติ float ในขณะที่บล็อกสีเขียวที่อยู่ในตำแหน่งที่ค่อนข้างจะคงค่า float ไว้
องค์ประกอบอินไลน์ที่มีตำแหน่งที่แน่นอนจะกลายเป็นองค์ประกอบบล็อก
องค์ประกอบอินไลน์ที่มีการวางตำแหน่งแบบสัมบูรณ์หรือคงที่จะใช้กับคุณสมบัติขององค์ประกอบบล็อก การแปลงองค์ประกอบอินไลน์เป็นองค์ประกอบบล็อกมีการอธิบายรายละเอียดเพิ่มเติมในตาราง
ในกรณีนี้ เราได้สร้างองค์ประกอบที่แตกต่างกันสองรายการ บล็อกแรก (บล็อกสีเขียว) เป็นองค์ประกอบบล็อก และบล็อกที่สอง (บล็อกสีแดง) เป็นองค์ประกอบแบบอินไลน์ ในตอนแรกจะมองเห็นได้เฉพาะบล็อกสีเขียวเท่านั้น
กล่องสีแดงไม่สามารถมองเห็นได้เนื่องจากคุณสมบัติความกว้างและความสูงใช้งานได้กับองค์ประกอบบล็อกและบล็อกอินไลน์เท่านั้น และเนื่องจากไม่มีเนื้อหา จึงไม่มีมิติใดๆ
เมื่อคุณกำหนดตำแหน่งที่แน่นอนหรือคงที่ให้กับบล็อกสีแดง มันจะกลายเป็นบล็อกบล็อกและขนาดบล็อกที่ระบุไว้จะมีผลใช้บังคับ
องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนไม่มีการยุบช่องว่างภายใน
ตามค่าเริ่มต้น เมื่อระยะขอบแนวตั้งสองอันสัมผัสกัน จะรวมกันเป็นหนึ่งเดียวเท่ากับค่าสูงสุด สิ่งนี้เรียกว่าการล่มสลายของมาร์จิ้น
พฤติกรรมขององค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนที่นี่จะคล้ายกับองค์ประกอบแบบลอย - ช่องว่างภายในขององค์ประกอบเหล่านั้นจะไม่รวมกับองค์ประกอบข้างเคียง
ในการสาธิตนี้ องค์ประกอบจะมีระยะห่างจากขอบ 20 พิกเซล ช่องว่างภายในจะยุบลงพร้อมกับช่องว่างภายในขององค์ประกอบหลักซึ่งมีขนาด 20 พิกเซลเช่นกัน อย่างที่คุณเห็นเฉพาะตำแหน่งที่แน่นอนเท่านั้นที่จะไม่มีการล่มสลาย
แต่เราจะป้องกันไม่ให้มาร์จิ้นพังทลายได้อย่างไร? เราจำเป็นต้องใส่ตัวคั่นระหว่างพวกมัน
ซึ่งอาจเป็นการเติมหรือเส้นขอบ และสามารถนำไปใช้กับทั้งองค์ประกอบหลักและองค์ประกอบย่อย อีกทางเลือกหนึ่งคือการเพิ่ม clearfix ให้กับองค์ประกอบหลัก
การจัดตำแหน่งองค์ประกอบด้วยพิกเซลและเปอร์เซ็นต์
คุณเคยใช้เปอร์เซ็นต์แทนพิกเซลเพื่อวางตำแหน่งองค์ประกอบหรือไม่? หากคำตอบคือใช่ คุณจะรู้ว่าออฟเซ็ตขององค์ประกอบนั้นขึ้นอยู่กับหน่วยที่เลือก (พิกเซลหรือเปอร์เซ็นต์)
มันสับสนเล็กน้อยใช่ไหม? ก่อนอื่นเรามาดูกันว่าข้อกำหนดพูดถึงเปอร์เซ็นต์ออฟเซ็ตอย่างไร:
ออฟเซ็ตเป็นเปอร์เซ็นต์ของความกว้าง (สำหรับซ้ายและขวา) หรือความสูง (บนหรือล่าง) ของบล็อกหลัก สำหรับองค์ประกอบที่ติดกาว ค่าชดเชยจะคำนวณเป็นเปอร์เซ็นต์ของความกว้าง (สำหรับซ้ายและขวา) หรือความสูง (บนหรือล่าง) ของการไหล ค่าลบเป็นที่ยอมรับได้
ตามที่กล่าวไว้ เมื่อคุณตั้งค่าออฟเซ็ตเป็นเปอร์เซ็นต์ ตำแหน่งขององค์ประกอบจะขึ้นอยู่กับความกว้างและความสูงขององค์ประกอบหลัก
การสาธิตแสดงความแตกต่างนี้:
ตัวอย่างนี้ใช้พิกเซลและเปอร์เซ็นต์สำหรับการชดเชย แน่นอน เมื่อคุณระบุออฟเซ็ตเป็นพิกเซล องค์ประกอบจะถูกย้ายไปยังตำแหน่งที่จำเป็น
และถ้าเราเลือกเปอร์เซ็นต์สำหรับออฟเซ็ต ผลลัพธ์จะขึ้นอยู่กับขนาดขององค์ประกอบหลัก ต่อไปนี้เป็นภาพที่แสดงวิธีคำนวณตำแหน่งใหม่:
หมายเหตุ: ดังที่คุณคงทราบแล้วว่าคุณสมบัติการแปลง (พร้อมกับฟังก์ชันการแปลต่างๆ) ยังช่วยให้คุณเปลี่ยนตำแหน่งขององค์ประกอบได้ แต่ในกรณีนี้ เมื่อใช้เปอร์เซ็นต์ การคำนวณจะขึ้นอยู่กับขนาดขององค์ประกอบเอง ไม่ใช่องค์ประกอบหลัก
บทสรุป
ฉันหวังว่าบทความนี้จะช่วยให้คุณเข้าใจตำแหน่งใน CSS ได้ดีขึ้น และชี้แจงความท้าทายบางประการ
เมื่อวางตำแหน่งบล็อกที่สัมพันธ์กัน คุณจะต้องตั้งค่าคุณสมบัติ ตำแหน่ง:ญาติและคุณสมบัติการเคลื่อนตัว การกระจัดในกรณีนี้จะเกิดขึ้นไม่สัมพันธ์กับองค์ประกอบ "พาเรนต์" (เช่นเดียวกับการวางตำแหน่งสัมบูรณ์) แต่สัมพันธ์กับบล็อกในการไหลปกติ สิ่งนี้จะชัดเจนยิ่งขึ้นด้วยตัวอย่าง สมมติว่าเรามีหน้า HTML ที่มี div สามรายการ:
การวางตำแหน่งสัมพัทธ์
มากำหนดขนาดและขอบเขตของบล็อกเหล่านี้ในสไตล์ชีต:
#blok1, #blok2, #blok3 ( ขอบ:1px สีแดงทึบ; ความกว้าง:150px; ความสูง:50px; )
ตอนนี้หน้าของเราในเบราว์เซอร์มีลักษณะดังนี้:
ตอนนี้เรามาเปลี่ยนตำแหน่งของบล็อกที่สองโดยการเพิ่มกฎลงในหน้าสไตล์:
#blok1, #blok2, #blok3 ( เส้นขอบ:1px สีแดงทึบ; ความกว้าง:150px; ความสูง:50px; ) #blok2( ตำแหน่ง:ญาติ; ซ้าย:50px; ด้านบน:25px; )
ตอนนี้หน้าของเรามีลักษณะดังนี้:

บล็อกที่สองของเราได้เลื่อนลงและไปทางขวาโดยสัมพันธ์กับตำแหน่งที่ควรจะเป็นในการไหลปกติ บล็อกที่เหลือยังคงอยู่ในสถานที่ของพวกเขา ในทางปฏิบัติ การวางตำแหน่งแบบสัมพันธ์นั้นไม่ค่อยได้ใช้ ดังนั้นเราจะไม่ใส่ใจกับมันอีกต่อไป และจะพิจารณาบล็อกแบบลอย
บล็อกลอยน้ำ
บล็อกเหล่านี้ไม่สามารถวางตำแหน่งด้วยความแม่นยำของพิกเซลได้เหมือนในรูปแบบก่อนหน้า แต่รูปแบบการวางตำแหน่งนี้เป็นเรื่องปกติมาก เว็บไซต์แทบจะไม่สามารถอยู่รอดได้โดยปราศจากบล็อกลอย และเป็นไปไม่ได้เลยที่จะสร้างเลย์เอาต์เว็บไซต์ที่ “ลื่นไหล” หากไม่มีบล็อคเหล่านั้น
บล็อกดังกล่าวสามารถเคลื่อนที่ไปรอบๆ หน้าได้อย่างอิสระ รูปภาพใน HTML ทำงานในลักษณะเดียวกัน โดยจัดเรียงโดยใช้พารามิเตอร์ จัดตำแหน่ง.
บล็อกลอยถูกกำหนดโดยคุณสมบัติ ลอยซึ่งกำหนดว่าบล็อกจะลอยอยู่หรือไม่และจะเคลื่อนที่ไปในทิศทางใด มีสามตัวเลือก:
• ซ้าย- บล็อกถูกกดไปที่ขอบด้านซ้าย องค์ประกอบที่เหลือจะไหลไปรอบ ๆ บล็อกทางด้านขวา


• ขวา- บล็อกถูกกดไปที่ขอบด้านขวา องค์ประกอบที่เหลือจะไหลไปรอบๆ ทางด้านซ้าย


• ไม่มี- บล็อกไม่เคลื่อนที่และอยู่ในตำแหน่งตามคุณสมบัติ ตำแหน่ง.
ลองดูตัวอย่าง สมมติว่าเรามีหน้า HTML พร้อมด้วยโค้ดต่อไปนี้:
การวางตำแหน่งบล็อก
บล็อก 1 ข้อความ
และหน้า style.css ด้วยโค้ดต่อไปนี้:
#blok1( ขอบ:1px สีแดงทึบ; ความกว้าง:150px; ความสูง:50px; )
ตอนนี้หน้าของเราในเบราว์เซอร์มีลักษณะดังนี้:
มาทำให้บล็อกของเราลอยแล้วดันไปทางขอบซ้าย:
#blok1( border:1px solid red; width:150px; height:50px; float:left; )
ทีนี้มาดันบล็อกไปที่ขอบด้านขวา:
#blok1( เส้นขอบ:1px สีแดงทึบ; ความกว้าง:150px; ความสูง:50px; ลอย:ขวา; )
ตอนนี้หน้าของเราในเบราว์เซอร์มีลักษณะดังนี้:
จะเกิดอะไรขึ้นหากมีบล็อกลอยหลายบล็อกบนหน้า? มาเพิ่มบล็อกอื่นในหน้า html ของเรา:
การวางตำแหน่งบล็อก
บล็อก 1 ข้อความ
บล็อกข้อความ 2
เพียงองค์ประกอบบางส่วนบนหน้า อาจเป็นได้เพียงข้อความ ลิงก์ รายการ รูปภาพ ฯลฯ
และให้มูลค่าทรัพย์สินที่แตกต่างกันแก่พวกเขา ลอย:
#blok1( border:1px solid red; width:150px; height:50px; float:left; ) #blok2( border:1px solid red; width:150px; height:50px; float:right; )
ตอนนี้หน้าของเราในเบราว์เซอร์มีลักษณะดังนี้:
เกิดอะไรขึ้นถ้าพวกเขามีค่าเหมือนกัน? ตัวอย่างเช่น:
#blok1( border:1px solid red; width:150px; height:50px; float:left; ) #blok2( border:1px solid red; width:150px; height:50px; float:left; )
จากนั้นบล็อกที่สองจะถูกกดไปที่ขอบด้านขวาของบล็อกแรก:
สถานการณ์จะคล้ายกันสำหรับค่าเดียวกัน ขวา:
#blok1( เส้นขอบ:1px สีแดงทึบ; ความกว้าง:150px; ความสูง:50px; float:right; ) #blok2( เส้นขอบ:1px สีแดงทึบ; ความกว้าง:150px; ความสูง:50px; float:right; )
โปรดทราบ: บล็อกแรก 1 จะถูกกดไปที่ขอบด้านขวา จากนั้นบล็อก 2 จะถูกกดลงไป
แต่จะเป็นอย่างไรถ้าเราต้องการให้บล็อกถูกกดไปที่ขอบด้านขวา แต่อยู่ด้านล่างอีกบล็อกหนึ่ง มีคุณสมบัติสำหรับสิ่งนี้ ชัดเจนซึ่งระบุว่าด้านใดของบล็อกลอยไม่สามารถอยู่ติดกับบล็อกลอยอื่นได้ คุณสมบัตินี้สามารถมีค่าใดค่าหนึ่งจากสี่ค่า:
• ซ้าย- บล็อกควรอยู่ใต้บล็อกด้านซ้ายทั้งหมด


• ขวา- บล็อกจะต้องอยู่ด้านล่างบล็อกด้านขวาทั้งหมด


• ทั้งคู่- บล็อกจะต้องอยู่ต่ำกว่าบล็อกลอยทั้งหมด


• ไม่มี- ไม่มีข้อจำกัด นี่เป็นค่าเริ่มต้น


เรามาตั้งค่าคุณสมบัตินี้สำหรับบล็อกที่สองในตัวอย่างสุดท้ายของเรา:
#blok1( เส้นขอบ:1px สีแดงทึบ; ความกว้าง:150px; ความสูง:50px; float:right; ) #blok2( เส้นขอบ:1px สีแดงทึบ; ความกว้าง:150px; ความสูง:50px; float:right; clear:right; )
ตอนนี้มันกลายเป็นอย่างที่ฉันต้องการ: หนึ่งช่วงตึกอยู่ใต้อีกช่วงหนึ่ง:

ในบทเรียนที่แล้ว เราได้สร้างเพจลักษณะนี้โดยใช้การกำหนดตำแหน่งแบบสัมบูรณ์:

มาดูกันว่าสามารถทำได้โดยใช้บล็อกลอยได้อย่างไร ดังนั้นโค้ดสำหรับเพจจึงเป็นดังนี้:
การวางตำแหน่งบล็อก
ส่วนหัวของไซต์
เนื้อหา
บล็อกข่าว
ด้านล่างของไซต์
ในหน้า style.css เรามาตั้งค่าขนาดและพื้นหลังสำหรับบล็อกของเรากันก่อน:
#header( พื้นหลัง:darkred; width:715px; height:100px; ) #menu( พื้นหลัง:oldlace; width:190px; height:300px; ) #content( พื้นหลัง:oldlace; width:525px; height:300px; ) #footer ( พื้นหลัง:darkred; width:715px; height:30px; ) #news( พื้นหลัง:สีเหลือง; ความกว้าง:150px; ความสูง:280px; )
ตอนนี้บล็อกของเราอยู่ในกระแสปกติเช่น อันหนึ่งอยู่ใต้อีกอันหนึ่ง เราจำเป็นต้องสร้างบล็อก เมนูและ เนื้อหาลอยและถนัดซ้าย บล็อก ข่าวควรกดชิดขอบด้านขวา เช่น เราจะทำให้มันเป็นบล็อกลอยมือขวา:
#header( พื้นหลัง:darkred; width:715px; height:100px; ) #menu( พื้นหลัง:oldlace; width:190px; height:300px; float:left; ) #content( พื้นหลัง:oldlace; width:525px; height:300px ; float:left; ) #footer( พื้นหลัง:darkred; width:715px; height:30px; ) #news( พื้นหลัง:สีเหลือง; ความกว้าง:150px; ความสูง:280px; float:right; )
หน้าของเราในเบราว์เซอร์มีลักษณะดังนี้:

ลองดูที่บล็อกข่าวของเรา คุณจะเห็นว่ามันอยู่ใต้ข้อความในบล็อก เนื้อหา- แต่เราต้องการให้บล็อกข่าวอยู่ทางด้านขวา และข้อความจะไหลรอบๆ บล็อกข่าวทางด้านซ้าย
ทำไมมันไม่ได้ผลสำหรับเรา? เพราะบล็อคของเรา ข่าวในโค้ด html จะอยู่ด้านล่างข้อความและเฉพาะข้อความที่อยู่ด้านล่างเท่านั้นที่จะไหลไปรอบๆ เพื่อแก้ไขปัญหานี้ เราจำเป็นต้องวางของเรา div = "ข่าว"เหนือข้อความ (เช่น ก่อนคำว่า "เนื้อหา"):
การวางตำแหน่งบล็อก
ส่วนหัวของไซต์
บล็อกข่าว
เนื้อหา
ด้านล่างของไซต์
ตอนนี้บล็อกข่าวของเราเข้าแทนที่แล้ว:

และเพื่อไม่ให้กดใกล้กับขอบด้านบนและด้านขวา เราจะเพิ่มค่ามาร์จิ้นสำหรับบล็อกนี้:
#news( พื้นหลัง:สีเหลือง; ความกว้าง:150px; ความสูง:280px; ลอย:ขวา; ระยะขอบ:10px; )
ตอนนี้เราได้รับผลลัพธ์เช่นเดียวกับการวางตำแหน่งแบบสัมบูรณ์

ยอมรับว่าการใช้บล็อกลอยจะง่ายกว่าในการจัดวางหน้า: คุณไม่จำเป็นต้องนับพิกเซล และโค้ดจะสั้นกว่า นอกจากนี้ด้วยรูปแบบ "ของเหลว" เราไม่สามารถระบุตำแหน่งที่แน่นอนของบล็อกบนหน้าจอได้ และด้วยความช่วยเหลือของบล็อกลอยที่เราไม่ต้องการสิ่งนี้ ก็เพียงพอที่จะระบุเฉพาะจุดสังเกต (ทางด้านซ้ายบน ด้านขวา ด้านล่าง หรือในบรรทัดเดียวกัน)
บล็อกคงที่
ดังที่คุณจำได้ ด้วยการวางตำแหน่งคงที่ บล็อกจะคงที่โดยสัมพันธ์กับพื้นที่รับชม ในบางวิธี บล็อกแบบตายตัวจะคล้ายกับเฟรม การเลื่อนใช้ได้เฉพาะภายในเฟรมเท่านั้น แต่ไม่สามารถเลื่อนภายในบล็อกได้
บล็อกแบบคงที่มีข้อเสียเปรียบที่สำคัญประการหนึ่ง: เบราว์เซอร์ Internet Explorer ไม่รองรับ ดังนั้นจึงไม่ควรใช้ในตอนนี้ ดังนั้นที่นี่เราจะระบุเฉพาะไวยากรณ์ของกฎดังกล่าวหากคุณต้องการลองด้วยตัวเอง (เช่นในเบราว์เซอร์ Opera)
#blok( ตำแหน่ง:คงที่; ซ้าย:0px; ด้านบน:0px; )
บล็อกที่มีตัวระบุ "blok" จะยังคงอยู่เมื่อเลื่อนหน้า
นั่นคือทั้งหมดสำหรับวันนี้ ในบทต่อไป เราจะมาทำความรู้จักกับคุณสมบัติของบล็อกและประเภทของบล็อกเพิ่มเติม
องค์ประกอบบล็อกใน HTML เป็นองค์ประกอบที่ครอบครองความกว้างทั้งหมดขององค์ประกอบหลักโดยค่าเริ่มต้น องค์ประกอบหลักอาจเป็นองค์ประกอบบล็อกอื่นหรือหน้าต่างเบราว์เซอร์ คุณสามารถกำหนดความกว้างและความสูงขององค์ประกอบบล็อกได้โดยใช้คุณสมบัติ CSS การวางตำแหน่งองค์ประกอบบล็อกเป็นกระบวนการในการวางตำแหน่งภายในหน้าต่างเบราว์เซอร์และสัมพันธ์กับองค์ประกอบเหล่านั้นโดยใช้ตำแหน่งคุณสมบัติ CSS ซ้าย บน ขวา และล่าง คุณสมบัติตำแหน่ง CSS ได้รับการออกแบบมาเพื่อตั้งค่าการวางตำแหน่งหนึ่งในสี่ประเภทที่มีอยู่: คงที่ (ค่าเริ่มต้น) สัมบูรณ์ คงที่ และสัมพันธ์กัน คุณสมบัติ CSS ที่เหลือ ได้แก่ ซ้าย , บน , ขวา และ ล่าง มีวัตถุประสงค์เพื่อกำหนดระยะทางสัมพันธ์กับขอบซ้าย บน ขวา และล่างขององค์ประกอบหลัก นอกจากนี้ เมื่อตั้งค่าคุณสมบัติบางอย่าง องค์ประกอบบล็อกสามารถทับซ้อนกันได้ และคุณสมบัตินี้ยังสามารถใช้บนเว็บไซต์ได้ด้วย
ตำแหน่งเริ่มต้น (คงที่)
หากคุณไม่ได้ระบุตำแหน่งสำหรับองค์ประกอบบล็อกหรือระบุ static ซึ่งเป็นสิ่งเดียวกัน องค์ประกอบบล็อกจะถูกจัดเรียงตามลำดับ ยิ่งไปกว่านั้น บล็อกถัดไป (เช่น สีแดง) จะอยู่บนบรรทัดใหม่ นอกจากนี้ การวางตำแหน่งนี้ไม่ได้รับผลกระทบจากการตั้งค่าระยะห่างทางซ้าย , บน , ขวา และล่าง



ตำแหน่งที่แน่นอน (สัมบูรณ์)
ด้วยการวางตำแหน่งที่แน่นอน ตำแหน่งขององค์ประกอบจะถูกระบุโดยสัมพันธ์กับขอบของหน้าต่างเบราว์เซอร์โดยใช้ระยะทางที่ระบุโดยคุณสมบัติด้านซ้าย บน ขวา และล่าง หากคุณระบุระยะทางซ้ายและขวาในเวลาเดียวกัน และระยะทางทั้งสองขัดแย้งกัน การตั้งค่าจะถูกกำหนดให้เป็น left ซึ่งเช่นเดียวกันสำหรับ top และ lower โดยที่ระยะทาง top จะมีความสำคัญกว่า การวางตำแหน่งแบบสัมบูรณ์มักใช้ร่วมกับการวางตำแหน่งสัมพัทธ์เพื่อการออกแบบ เมื่อจำเป็นต้องวางองค์ประกอบต่างๆ ที่สัมพันธ์กัน นอกจากนี้ยังสามารถใช้เพื่อสร้างเมนูแบบเลื่อนลง เค้าโครงไซต์ ฯลฯ




ตำแหน่งคงที่
การวางตำแหน่งคงที่แตกต่างจากการวางตำแหน่งประเภทอื่นๆ และไม่เลื่อนไปตามเนื้อหาเมื่อคุณเลื่อนหน้า องค์ประกอบบล็อกที่มีตำแหน่งคงที่จะยึดโดยใช้คุณสมบัติด้านซ้าย ด้านบน ขวา และด้านล่างที่ขอบของหน้าต่างเบราว์เซอร์ การวางตำแหน่งคงที่ใช้เพื่อสร้างอินเทอร์เฟซเฟรม (หน้าต่างเบราว์เซอร์แบ่งออกเป็นหลายส่วน) เมนูคงที่ ส่วนท้ายของไซต์คงที่ และบล็อก "ถาวร" (รายการลิงก์ ปุ่มโซเชียล ฯลฯ )




ตำแหน่งสัมพัทธ์
การระบุตำแหน่งสัมพัทธ์จะถูกระบุโดยการระบุระยะทางด้านซ้าย ด้านบน ด้านขวา และด้านล่างที่สัมพันธ์กับตำแหน่งปัจจุบัน




อย่างไรก็ตาม ตำแหน่งบล็อกนี้ยังสามารถสร้างได้โดยใช้คุณสมบัติมาร์จิ้น



การวางตำแหน่งแบบสัมพัทธ์ไม่ใช่เรื่องสนุกที่จะใช้เดี่ยวๆ แต่ส่วนใหญ่จะใช้ร่วมกับการวางตำแหน่งแบบสัมบูรณ์
พิจารณาตัวเลือกต่างๆ:


ใช้งานได้กับองค์ประกอบที่มีตำแหน่งทั้งหมด ยกเว้นองค์ประกอบแบบคงที่
ตัวอย่างการวางตำแหน่ง
องค์ประกอบสามารถทับซ้อนกันได้!
แสดงองค์ประกอบเหนือส่วนที่เหลือ!
คุณสมบัติตำแหน่งมี 4 ค่า: คงที่, คงที่, สัมพันธ์และสัมบูรณ์ ความหมายแต่ละอย่างจะแสดงไว้ด้านล่างพร้อมตัวอย่างการใช้งาน
ก่อนที่เราจะดูรายละเอียดเกี่ยวกับการวางตำแหน่งองค์ประกอบทุกประเภทบนหน้า เราจะต้องพิจารณาว่าการไหลของเอกสารคืออะไร
การไหลของเอกสาร
ตามค่าเริ่มต้น องค์ประกอบบนหน้าเว็บจะแสดงตามลำดับที่ปรากฏในเอกสาร HTML นั่นคือองค์ประกอบบล็อกจะใช้ความกว้างเต็มที่มีอยู่และจะเรียงซ้อนในแนวตั้งหนึ่งรายการด้านล่างอีกรายการหนึ่ง องค์ประกอบแบบอินไลน์จะเรียงกันในแนวนอนจนกระทั่งเต็มความกว้างที่มีอยู่ หลังจากใช้ความกว้างทั้งหมดแล้ว จะมีการแบ่งบรรทัดและทุกอย่างจะเริ่มต้นใหม่อีกครั้ง การจัดเรียงองค์ประกอบนี้เรียกว่า การไหลปกติ(หรือเรียกอีกอย่างว่า การไหลของเอกสารหรือกระแสทั่วไป)
คุณสามารถใช้คุณสมบัติ float หรือตำแหน่งเพื่อลบองค์ประกอบออกจากโฟลว์ปกติ หากองค์ประกอบ "หลุดออก" จากโฟลว์ปกติ องค์ประกอบที่อยู่ในโค้ดด้านล่างองค์ประกอบนั้นจะถูกเลื่อนไปยังตำแหน่งบนหน้าเว็บ
การวางตำแหน่งแบบคงที่
คงที่คือตำแหน่งเริ่มต้นสำหรับองค์ประกอบทั้งหมดบนหน้าเว็บ หากคุณไม่ใช้คุณสมบัติตำแหน่งกับองค์ประกอบ คุณสมบัตินั้นจะคงที่และจะปรากฏบนหน้าเว็บตามกระแสทั่วไปขององค์ประกอบ
เมื่อใช้คุณสมบัติ CSS top , left , right หรือ lower กับองค์ประกอบที่มีตำแหน่งคงที่ คุณสมบัติเหล่านั้นจะถูกละเว้น
หากจำเป็น คุณสามารถตั้งค่าตำแหน่งคงที่ในสไตล์ชีตได้โดยใช้ค่าคงที่:
ย่อหน้าแรก.
ย่อหน้าที่สอง


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

ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ


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


พยายาม "
หมายเหตุ: องค์ประกอบสัมพัทธ์มักจะใช้เป็นพาเรนต์สำหรับองค์ประกอบสัมบูรณ์
ตำแหน่งที่แน่นอน
องค์ประกอบที่มีตำแหน่งที่แน่นอนจะถูกลบออกจากโฟลว์โดยรวมทั้งหมด องค์ประกอบที่เหลือจะใช้พื้นที่ว่างโดยไม่สนใจองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนโดยสิ้นเชิง จากนั้น คุณสามารถวางตำแหน่งองค์ประกอบได้ทุกที่ที่คุณต้องการบนหน้าเว็บโดยใช้คุณสมบัติด้านบน ซ้าย ขวา หรือด้านล่าง
องค์ประกอบที่มีตำแหน่งที่แน่นอนทั้งหมดจะถูกวางตำแหน่งโดยสัมพันธ์กับหน้าต่างเบราว์เซอร์หรือสัมพันธ์กับบรรพบุรุษในตำแหน่งที่ใกล้ที่สุด (ถ้ามี) ที่มีคุณสมบัติตำแหน่งเป็นค่าสัมบูรณ์ คงที่ หรือสัมพันธ์กัน

มาเปลี่ยนตำแหน่งของโลโก้โดยใช้ตำแหน่งที่แน่นอน
ตอนนี้โลโก้จะอยู่ที่มุมขวาบนของหน้า


พยายาม "
องค์ประกอบที่ทับซ้อนกัน
เมื่อองค์ประกอบอยู่นอกกระแสโดยรวมของหน้า องค์ประกอบเหล่านั้นสามารถทับซ้อนกันได้ โดยทั่วไป ลำดับขององค์ประกอบจะสอดคล้องกับลำดับในโค้ด HTML ของเพจ อย่างไรก็ตาม คุณสามารถควบคุมลำดับของการทับซ้อนได้โดยใช้คุณสมบัติ CSS z-index ยิ่งค่าสูง องค์ประกอบก็จะยิ่งสูงขึ้น
ดัชนี z: 1;
ดัชนี z: 0;
ดัชนี z: 2;