มักใช้ในเลย์เอาต์ของเว็บไซต์สมัยใหม่เพื่อสร้างกริดและหมายถึงบล็อกหรือคอนเทนเนอร์บางประเภท นอกจากนี้ยังสามารถซ้อนแท็กอื่นๆ ไว้ในนั้นได้ ซึ่งไม่สามารถทำได้กับองค์ประกอบบล็อกทั้งหมด ดังนั้น
สะดวกในการใช้งาน โดยทั่วไปบล็อกจะซ้อนกันและไม่ได้แทรกลงในองค์ประกอบแบบอินไลน์ องค์ประกอบอินไลน์ HTML คือข้อความ และใช้ CSS เพื่อจัดรูปแบบ
เมื่อกำหนดความกว้างของเนื้อหา ความกว้างของบล็อกทั้งหมดคือผลรวมของค่าการเติมด้านขวาและด้านซ้าย ระยะขอบ เส้นขอบ และความกว้าง ที่ความสูงที่กำหนด - จากช่องว่างด้านบนและด้านล่าง ระยะขอบ เส้นขอบ และความสูง ข้อความในองค์ประกอบบล็อกจะถูกจัดแนวตามค่าเริ่มต้น หากหนึ่งในนั้นมีองค์ประกอบแบบอินไลน์ร่วมกับองค์ประกอบบล็อก บล็อกที่ไม่ระบุชื่อจะถูกสร้างขึ้นรอบๆ องค์ประกอบแบบอินไลน์ สไตล์เริ่มต้นจะถูกนำไปใช้กับมัน นอกจากนี้ยังจะสืบทอดสไตล์ที่ระบุซึ่งกำหนดให้กับพาเรนต์ด้วย
การไหลของเอกสาร
Flow หมายถึงลำดับการแสดงองค์ประกอบของหน้า ซึ่งกำหนดโดยคุณสมบัติที่ระบุใน CSS ในกรณีนี้ ตามค่าเริ่มต้น บล็อกจะเรียงจากบนลงล่าง และหากมีพื้นที่ไม่เพียงพอ แท็กอินไลน์จะถูกย้ายไปยังบรรทัดใหม่และจัดเรียงจากบนลงล่างและจากซ้ายไปขวา ตำแหน่งขององค์ประกอบบนเพจขึ้นอยู่กับตำแหน่งขององค์ประกอบในโค้ด ยิ่งตำแหน่งสูงเท่าใด ก็จะยิ่งอยู่เร็วขึ้นเท่านั้น แต่ละองค์ประกอบบล็อกดูเหมือนสี่เหลี่ยมที่ผลักเพื่อนบ้านออกไป คุณสามารถเปลี่ยนลักษณะการทำงานนี้ได้โดยใช้คุณสมบัติพิเศษ การจัดแนวบล็อกบางส่วนให้อยู่กึ่งกลางหรือด้านข้างของคอนเทนเนอร์ใน CSS เรียกว่าการวางตำแหน่ง
องค์ประกอบการวางตำแหน่ง
การวางตำแหน่งของบล็อกสามารถควบคุมได้โดยใช้การวางตำแหน่งแบบสัมบูรณ์และแบบสัมพัทธ์ การวางตำแหน่งจะใช้เพื่อให้ส่วนใหญ่ของหน้ามีตำแหน่งเฉพาะ เพื่อสร้างอินเทอร์เฟซที่ซับซ้อน ป๊อปอัป และองค์ประกอบตกแต่ง คุณสมบัติหลักที่ใช้ในการวางตำแหน่งบล็อกใน CSS คือตำแหน่ง มีคุณสมบัติหลักสี่ประการ:
- ญาติ;
- แน่นอน;
- ที่ตายตัว;
- คงที่.
ด้วยความช่วยเหลือ คุณสามารถสลับโหมดเค้าโครงได้โดยการระบุพารามิเตอร์หนึ่งในสี่ตัว: บน ขวา ล่าง หรือซ้าย นอกจากนี้ยังมีคุณสมบัติสำหรับการสั่งซื้อเลเยอร์ - z-index โดยปกติแล้วการวางตำแหน่งด้วยคุณสมบัติคงที่จะไม่ถูกใช้เนื่องจากจะระบุถึงการวางตำแหน่งเริ่มต้นของบล็อก ดังนั้นการใช้พารามิเตอร์ใดๆ จึงไม่ส่งผลกระทบแต่อย่างใด คุณสมบัติอีกสามประการอื่นใช้สำหรับโครงร่าง: แบบสัมพัทธ์ แบบสัมบูรณ์ แบบคงที่
ตำแหน่งสัมพัทธ์
การวางตำแหน่งสัมพัทธ์ของบล็อกใน CSS เช่น ตำแหน่ง: คุณสมบัติสัมพัทธ์ หมายความว่าองค์ประกอบสามารถย้ายได้และตำแหน่งเดิมมีการเปลี่ยนแปลง บล็อกดังกล่าวยังคงอยู่ในกระแส อันที่จริงไม่ใช่ตัวเขาเองที่ถูกแทนที่ แต่เป็นสำเนาของเขา ค่าคุณสมบัติถูกตั้งค่าเพื่อระบุจำนวนบล็อกที่จะเคลื่อนที่ไปในทิศทางเดียวหรืออีกทางหนึ่ง ส่วนใหญ่มักวัดเป็นพิกเซล แต่สามารถใช้หน่วยอื่นได้
การใช้คุณสมบัติสำหรับการกำหนดตำแหน่งสัมพัทธ์
คุณสมบัติด้านบนย้ายสำเนาของบล็อกเฉพาะขึ้นหรือลงตามจำนวนพิกเซลที่ระบุในคุณสมบัติ เมื่อใช้งานองค์ประกอบที่อยู่ด้านล่างหรือด้านบนจะยังคงอยู่ในตำแหน่งเดิมเนื่องจากในความเป็นจริงแล้วบล็อกที่ถูกเลื่อนจะไม่เคลื่อนที่ไปที่ใดก็ได้
คุณสมบัติด้านล่างจะย้ายบล็อกไปในทิศทางตรงกันข้ามกับคุณสมบัติด้านบน ค่าบวกช่วยเลื่อนขึ้น และค่าลบช่วยเลื่อนลง คุณสมบัติด้านซ้ายและขวาจะย้ายองค์ประกอบไปทางขวาและซ้ายตามลำดับ เมื่อรวมทั้งหมดเข้าด้วยกัน คุณสามารถกำหนดตำแหน่งที่แน่นอนของบล็อกบนหน้า โดยเลื่อนไปตามแกนพิกัดแนวตั้งและแนวนอน หากคุณเพิ่มการเยื้อง การเยื้องเหล่านั้นจะไม่คำนวณจากขอบของบล็อก แต่จากการคัดลอกออฟเซ็ตไปด้านข้าง
ตำแหน่งที่แน่นอน
ตำแหน่งที่แน่นอนของบล็อกใน CSS ถูกระบุโดยค่าของคุณสมบัติตำแหน่งที่แน่นอน องค์ประกอบที่อยู่ในตำแหน่งจะไม่อยู่ในโฟลว์เอกสารอย่างแน่นอน และบล็อกที่อยู่ติดกันจะเข้ามาแทนที่ ความกว้างขององค์ประกอบดังกล่าวจะถูกขยายขึ้นอยู่กับเนื้อหาและสามารถเลื่อนได้โดยการตั้งค่าคุณสมบัติบางอย่างบน, ซ้าย, ขวา, ล่าง การวางตำแหน่งที่แน่นอนของบล็อกใน CSS มีประโยชน์สำหรับส่วนหัว แต่ตำแหน่ง: สัมบูรณ์ไม่ได้ทำงานเฉพาะกับองค์ประกอบบล็อกเท่านั้น แต่ยังรวมถึงองค์ประกอบแบบอินไลน์ด้วย
การจัดองค์ประกอบให้อยู่ตรงกลาง
องค์ประกอบอินไลน์ที่อยู่ในตำแหน่งจะทำงานเหมือนกับองค์ประกอบอินไลน์ทุกประการ ดังนั้น การวางตำแหน่งยังสามารถใช้เพื่อควบคุมข้อความใน CSS ได้ด้วย คุณสามารถใช้คุณสมบัติใหม่บางอย่างได้ เช่น เปลี่ยนความสูงและความกว้าง การจัดกึ่งกลางและแนวตั้งใน CSS ใช้คุณสมบัติหลายอย่างรวมกัน ควบคุมการจัดตำแหน่งแนวตั้งของคุณสมบัติด้านบน หากคุณต้องการจัดบล็อกให้อยู่ตรงกลางใน CSS คอนเทนเนอร์หลักควรอยู่ในตำแหน่งที่ค่อนข้างเหมาะสม และองค์ประกอบที่จัดชิดควรอยู่ในตำแหน่งที่แน่นอน คอนเทนเนอร์จำเป็นต้องตั้งค่าคุณสมบัติด้านบน: 50% และหากต้องการย้ายองค์ประกอบตามความสูงครึ่งหนึ่งของตัวเอง ให้ใช้คุณสมบัติการแปลที่มีค่า "0, -50%" องค์ประกอบที่มีตำแหน่งที่แน่นอนสามารถแยกแยะได้เป็นประเภทใหม่ เนื่องจากคุณสมบัติที่ไม่พร้อมใช้งานสำหรับการวางตำแหน่งประเภทอื่นจะถูกนำไปใช้กับองค์ประกอบเหล่านั้น
ตำแหน่งที่สัมพันธ์กับมุมซ้ายบนของเบราว์เซอร์
คุณสมบัติด้านซ้าย บน ขวา และล่างทำงานแตกต่างกันในองค์ประกอบที่มีตำแหน่งที่แน่นอนและค่อนข้างตรงกัน สำหรับองค์ประกอบที่สัมพันธ์กัน คุณสมบัติเหล่านี้จะตั้งค่าออฟเซ็ตที่สัมพันธ์กับตำแหน่งขององค์ประกอบนั้น ตำแหน่งที่แน่นอนจะครอบครองตำแหน่งที่สัมพันธ์กับระบบพิกัดเฉพาะซึ่งเชื่อมโยงกับขนาดของหน้าต่างเบราว์เซอร์ จุดเริ่มต้นของระบบนี้คือมุมของหน้าต่าง เมื่อใช้คุณสมบัติด้านซ้าย การเยื้องจะถูกนับจากด้านซ้ายของเบราว์เซอร์ แต่จะไม่มีแถบเลื่อน คุณสมบัติด้านบน เมื่ออยู่ในตำแหน่งที่แน่นอน จะระบุออฟเซ็ตจากด้านบนของเบราว์เซอร์ไปจนถึงด้านบนขององค์ประกอบที่จะใช้ ด้วยการรวมคุณสมบัติทั้งสองเข้าด้วยกัน จึงสามารถย้ายองค์ประกอบโดยสัมพันธ์กับมุมซ้ายบนของเบราว์เซอร์ได้
ตำแหน่งสัมพันธ์กับมุมขวาบนของเบราว์เซอร์
ในทำนองเดียวกัน การใช้คุณสมบัติด้านขวาและด้านบน คุณสามารถกดองค์ประกอบไปทางด้านขวาของหน้าต่างเบราว์เซอร์และเปลี่ยนตำแหน่งแนวตั้ง โดยเลื่อนไปที่มุมขวาบน หากคุณสมบัติที่ถูกต้องถูกตั้งค่าเป็นค่าลบ บล็อกจะย้ายออกไปนอกขอบหน้าต่าง หลังจากนี้ แถบเลื่อนควรปรากฏขึ้น หากต้องการย้ายองค์ประกอบลง ให้ใช้คุณสมบัติด้านล่าง ระบุการเยื้องจากขอบด้านล่างของหน้าต่างเบราว์เซอร์ไปที่ด้านล่างของบล็อก หากค่าเป็นลบ แถบเลื่อนก็จะปรากฏขึ้นเช่นกัน เนื่องจากองค์ประกอบถูกย้ายเกินขอบด้านล่างของหน้าต่างเบราว์เซอร์
ระบบพิกัดสำหรับตำแหน่งที่แน่นอน
ตามค่าเริ่มต้น องค์ประกอบทั้งหมดที่ได้รับการกำหนดตำแหน่งที่แน่นอนจะเชื่อมโยงกับระบบพิกัดเดียว - หน้าต่างเบราว์เซอร์ แต่สามารถเปลี่ยนแปลงได้โดยให้องค์ประกอบหลักวางตำแหน่งสัมพันธ์กัน จากนั้นบล็อกลูกจะเปลี่ยนตำแหน่งขึ้นอยู่กับพาเรนต์ หากในบรรดาองค์ประกอบหลักมีหลายรายการที่มีตำแหน่งสัมพันธ์กัน การนับจะดำเนินการจากองค์ประกอบที่ใกล้ที่สุด ในกรณีนี้ ตำแหน่งเริ่มต้นจะมาจากสิ่งที่ระบุไว้ในแท็กเนื้อหา
จุดอ้างอิงสำหรับองค์ประกอบที่มีตำแหน่งที่แน่นอน
ก่อนที่องค์ประกอบจะได้รับตำแหน่งที่แน่นอน องค์ประกอบนั้นอยู่ที่สถานที่บางแห่งที่เรียกว่าต้นกำเนิดโดยนัย หากบล็อกดังกล่าวไม่ได้รับคุณสมบัติ บล็อกนั้นก็จะไม่เคลื่อนที่ คุณสามารถเปลี่ยนได้โดยการตั้งค่าคุณสมบัติระยะขอบ มันจะทำงานคล้ายกับคุณสมบัติการวางตำแหน่ง หากคุณไม่ได้กำหนดค่าของคุณสมบัติด้านซ้ายและค่าอื่นๆ ทั้งหมด ค่านั้นจะเท่ากับอัตโนมัติ คุณยังสามารถใช้อัตโนมัติเพื่อคืนองค์ประกอบกลับไปยังตำแหน่งเดิมได้
ตำแหน่งคงที่
ความหมายอื่นได้รับการแก้ไข คุณสมบัติตำแหน่งยึดองค์ประกอบไปยังตำแหน่งเฉพาะ การวางตำแหน่งคงที่มักใช้เพื่อสร้างเมนูใน CSS มันคล้ายกับค่าสัมบูรณ์ แต่บล็อกคงที่หลุดออกจากโฟลว์ แม้ว่าจะเลื่อนหน้า องค์ประกอบดังกล่าวจะยังคงอยู่ ดังนั้นจึงสะดวกที่จะใช้สร้างเมนูใน CSS จุดเริ่มต้นจะเชื่อมโยงกับหน้าต่างเบราว์เซอร์ หากมีบล็อกหลายตำแหน่ง คุณสมบัติ z-index จะถูกใช้ในการเรียงลำดับ ด้วยความช่วยเหลือ คุณสามารถซ้อนทับบล็อกสัมพัทธ์กับบล็อกสัมบูรณ์ได้ หากคุณให้ดัชนีที่เกี่ยวข้องซึ่งแสดงเป็นจำนวนเต็ม ยิ่งมีขนาดใหญ่เท่าใด บล็อกก็จะยิ่งสูงขึ้นเท่านั้น
ตำแหน่งที่ไม่ธรรมดา!
ตัดสินใจว่าจะแสดงองค์ประกอบใดไว้ข้างหน้า!
องค์ประกอบอาจทับซ้อนกัน!
การวางตำแหน่ง
คุณสมบัติการวางตำแหน่ง CSS ช่วยให้คุณสามารถวางตำแหน่งองค์ประกอบได้ นอกจากนี้ยังสามารถวางองค์ประกอบไว้ด้านหลังอีกองค์ประกอบหนึ่ง และระบุสิ่งที่จะเกิดขึ้นเมื่อเนื้อหาขององค์ประกอบมีขนาดใหญ่เกินไป
องค์ประกอบสามารถวางตำแหน่งได้โดยใช้คุณสมบัติด้านบน ด้านล่าง ด้านซ้าย และด้านขวา อย่างไรก็ตาม คุณสมบัติเหล่านี้จะไม่ทำงานเว้นแต่จะตั้งค่าคุณสมบัติตำแหน่งไว้ นอกจากนี้ยังทำงานแตกต่างกันไปขึ้นอยู่กับวิธีการจัดตำแหน่ง
มีสี่วิธีในการวางตำแหน่งที่แตกต่างกัน
การวางตำแหน่งแบบคงที่
องค์ประกอบ HTML จะถูกวางตำแหน่งแบบคงที่ตามค่าเริ่มต้น องค์ประกอบที่มีตำแหน่งคงที่จะถูกวางตำแหน่งเสมอตามโฟลว์มาตรฐานขององค์ประกอบบนหน้าเว็บ
องค์ประกอบที่มีตำแหน่งคงที่จะไม่ได้รับผลกระทบจากคุณสมบัติด้านบน ด้านล่าง ด้านซ้าย และด้านขวา
ตำแหน่งคงที่
องค์ประกอบตำแหน่งคงที่มีตำแหน่งสัมพันธ์กับหน้าต่างเบราว์เซอร์
มันจะไม่ขยับแม้ว่าจะเลื่อนหน้าต่างแล้วก็ตาม:
ความคิดเห็น: IE7 และ IE8 รองรับค่าคงที่เฉพาะเมื่อมีการระบุประเภทเอกสาร!DOCTYPE
องค์ประกอบคงที่จะถูกลบออกจากโฟลว์ปกติ เอกสารและองค์ประกอบอื่นๆ ทำงานเหมือนกับไม่มีองค์ประกอบคงที่
องค์ประกอบคงที่สามารถซ้อนทับองค์ประกอบอื่นๆ ได้
การวางตำแหน่งสัมพัทธ์
องค์ประกอบที่มีตำแหน่งค่อนข้างจะอยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งปกติ
องค์ประกอบที่มีตำแหน่งค่อนข้างมักใช้เป็นคอนเทนเนอร์สำหรับองค์ประกอบที่มีตำแหน่งที่แน่นอน
ตำแหน่งที่แน่นอน
องค์ประกอบที่มีตำแหน่งที่แน่นอนจะถูกวางตำแหน่งโดยสัมพันธ์กับองค์ประกอบหลักตัวแรกที่อยู่ในตำแหน่งอื่นที่ไม่ใช่แบบคงที่ หากไม่พบองค์ประกอบดังกล่าว องค์ประกอบหลักจะถูกถือเป็น :
องค์ประกอบที่มีตำแหน่งที่แน่นอนจะถูกลบออกจากโฟลว์องค์ประกอบมาตรฐาน เอกสารและองค์ประกอบอื่นๆ ทำงานเหมือนกับว่าไม่มีองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอน
องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนสามารถซ้อนทับองค์ประกอบอื่นๆ ได้
องค์ประกอบที่ทับซ้อนกัน
เมื่อองค์ประกอบอยู่นอกโฟลว์มาตรฐาน องค์ประกอบเหล่านั้นสามารถซ้อนทับองค์ประกอบอื่นๆ ได้
คุณสมบัติดัชนี z ระบุลำดับแนวตั้งขององค์ประกอบ (องค์ประกอบใดควรวางไว้ด้านหน้าหรือด้านหลังองค์ประกอบอื่นๆ)
องค์ประกอบสามารถมีลำดับแนวตั้งที่เป็นบวกหรือลบได้:
องค์ประกอบที่มีลำดับแนวตั้งมากกว่าจะอยู่ด้านหน้าองค์ประกอบที่มีลำดับแนวตั้งน้อยกว่าเสมอ
ความคิดเห็น:หากองค์ประกอบสองตำแหน่งซ้อนทับกันและไม่มีการระบุลำดับแนวตั้ง องค์ประกอบที่อยู่ภายหลังในโค้ด HTML จะแสดงที่ด้านบน
การกำหนดรูปร่างขององค์ประกอบ
ตัวอย่างนี้สาธิตวิธีการกำหนดรูปร่างขององค์ประกอบ องค์ประกอบจะถูกตัดให้เป็นรูปร่างนี้แล้วจึงแสดง
วิธีแสดงองค์ประกอบที่ล้นโดยใช้การเลื่อน
ตัวอย่างนี้สาธิตวิธีการตั้งค่าคุณสมบัติโอเวอร์โฟลว์เพื่อสร้างแถบเลื่อนเมื่อเนื้อหาขององค์ประกอบมีขนาดใหญ่เกินกว่าจะพอดีกับพื้นที่ที่ระบุ
วิธีบังคับให้เบราว์เซอร์จัดการโอเวอร์โฟลว์โดยอัตโนมัติ
ตัวอย่างนี้สาธิตวิธีการบังคับให้เบราว์เซอร์จัดการโอเวอร์โฟลว์โดยอัตโนมัติ
การเปลี่ยนแปลงเคอร์เซอร์
ตัวอย่างนี้สาธิตวิธีการเปลี่ยนเคอร์เซอร์
คุณสมบัติการวางตำแหน่ง CSS ทั้งหมด
ตัวเลขในคอลัมน์ "CSS" ระบุเวอร์ชันของ CSS ที่กำหนดคุณสมบัติ (CSS1 หรือ CSS2)
| คุณสมบัติ |
คำอธิบาย |
ค่านิยม |
ซีเอสเอส |
|---|
|
การวางตำแหน่งใน CSS ดูเหมือนค่อนข้างง่าย ระบุว่าบล็อกใดและควรตั้งอยู่ที่ไหน อย่างไรก็ตามทุกอย่างไม่ง่ายอย่างที่คิดเมื่อมองแวบแรก มีหลายจุดที่อาจทำให้มือใหม่สับสนได้ คุณสามารถได้รับประโยชน์มากขึ้นจากการวางตำแหน่งหากคุณเข้าใจรายละเอียดวิธีการทำงาน
โมเดลกล่องใน CSS และประเภทการวางตำแหน่ง
ก่อนที่คุณจะเริ่มต้น ฉันแนะนำให้คุณอ่านบทความ Box Model ใน CSS โดยสรุป: แต่ละองค์ประกอบใน html เป็นรูปสี่เหลี่ยมผืนผ้าซึ่งคุณสามารถระบุค่าของระยะขอบด้านในและด้านนอกได้ตลอดจนเส้นขอบที่แยกพวกมันออกจากกัน
รูปแบบการวางตำแหน่งจะกำหนดตำแหน่งที่ควรวางสี่เหลี่ยมผืนผ้านี้ รวมถึงผลกระทบต่อองค์ประกอบรอบๆ อย่างไร
คุณสมบัติตำแหน่งใน CSS สามารถใช้ค่าได้ห้าค่า:
- แน่นอน
- ญาติ
- ที่ตายตัว
- คงที่
- สืบทอด
ค่าคงที่เป็นค่าเริ่มต้น องค์ประกอบใดๆ ที่มีการวางตำแหน่งแบบคงที่จะอยู่ในโฟลว์ทั่วไปของเอกสาร กฎสำหรับการวางตำแหน่งถูกกำหนดโดยโมเดล Box สำหรับองค์ประกอบดังกล่าว คุณสมบัติด้านบน ขวา ล่าง และซ้ายจะถูกละเว้น หากต้องการใช้คุณสมบัติเหล่านี้ การวางตำแหน่งขององค์ประกอบต้องเป็นแบบสัมบูรณ์ สัมพันธ์ หรือคงที่
ค่าที่สืบทอด เช่นเดียวกับคุณสมบัติ CSS อื่นๆ ทั้งหมดจะใช้เพื่อให้แน่ใจว่าองค์ประกอบนั้นใช้ค่าเดียวกันกับองค์ประกอบหลัก
ตำแหน่งที่แน่นอน
การวางตำแหน่งที่แน่นอนจะลบองค์ประกอบออกจากโฟลว์โดยรวมของเอกสาร สำหรับองค์ประกอบรอบๆ ในกรณีนี้ พวกเขาเพิกเฉยต่อองค์ประกอบที่ค้นหา ราวกับว่ามีชุดคุณสมบัติ display: none; - หากคุณไม่ต้องการให้พื้นที่สำหรับองค์ประกอบดังกล่าวเต็มไปด้วยองค์ประกอบอื่นๆ คุณจะต้องคิดวิธีอื่น
คุณกำหนดตำแหน่งขององค์ประกอบด้วยการวางตำแหน่งที่แน่นอนโดยใช้คุณสมบัติด้านบน ซ้าย ขวา และด้านล่าง คุณเพียงแค่ต้องระบุสองรายการด้านบนหรือล่างและซ้ายหรือขวา หากไม่มีการระบุคุณสมบัติ คู่บนซ้ายจะถูกตั้งค่าเป็น 0
กุญแจสำคัญในการวางตำแหน่งที่แน่นอนคือการทำความเข้าใจว่าจุดอ้างอิงของคุณคืออะไร หากตั้งค่าคุณสมบัติบนสุดเป็น 20px แล้วควรนับจากที่ใด
คำตอบนั้นง่ายมาก: องค์ประกอบดังกล่าวอยู่ในตำแหน่งที่สัมพันธ์กับองค์ประกอบหลักที่ใกล้ที่สุด ซึ่งมีตำแหน่งอื่นที่ไม่ใช่ static หากไม่มีองค์ประกอบดังกล่าว องค์ประกอบนั้นจะถูกวางตำแหน่งให้สัมพันธ์กับเอกสารหลัก นั่นคือ เมื่อตั้งค่าตำแหน่งที่แน่นอน CSS จะบอกให้เบราว์เซอร์ดูองค์ประกอบหลัก และหากการวางตำแหน่งไม่คงที่ ก็ควรจัดตำแหน่งองค์ประกอบปัจจุบันให้สัมพันธ์กับองค์ประกอบนั้น
ตำแหน่งสัมพัทธ์
องค์ประกอบที่มีตำแหน่งค่อนข้างจะถูกวางตามตำแหน่งของตัวเอง ซึ่งเป็นการเปลี่ยนแปลงปกติสัมพันธ์กับตำแหน่งปกติ สิ่งนี้คล้ายกับการเพิ่มช่องว่างภายในให้กับองค์ประกอบโดยใช้คุณสมบัติระยะขอบ อย่างไรก็ตาม มีความแตกต่างที่สำคัญประการหนึ่งคือ องค์ประกอบที่อยู่ติดกัน ไม่ต้องคำนึงถึงการเปลี่ยนแปลงนี้เมื่อใช้การวางตำแหน่ง
ลองนึกภาพแบบนี้: ภาพบางภาพถูกเลื่อนออกไป และ "ผี" ยังคงอยู่แทน องค์ประกอบทั้งหมดจะอยู่ในตำแหน่งที่สัมพันธ์กับ "ผี" นี้ ซึ่งช่วยให้เราสามารถวางองค์ประกอบต่างๆ ไว้ซ้อนกันได้
ดังนั้น องค์ประกอบที่มีการวางตำแหน่งแบบสัมพัทธ์จะถูกดึงมาจากโฟลว์ปกติขององค์ประกอบ แต่ยังคงมีอิทธิพลต่อการวางตำแหน่งขององค์ประกอบข้างเคียง ซึ่งทำงานเพื่อให้องค์ประกอบดั้งเดิมยังคงอยู่ในโฟลว์เอกสาร
ในกรณีนี้ เราไม่ควรถามคำถามเกี่ยวกับตำแหน่งขององค์ประกอบที่นี่ คำตอบก็คือ: การไหลของเอกสารตามปกติ ดูเหมือนคุณได้เพิ่มช่องว่างภายในให้กับองค์ประกอบมาก แต่ในขณะเดียวกันก็ไม่ส่งผลกระทบต่อองค์ประกอบข้างเคียง
ตำแหน่งคงที่
การวางตำแหน่งคงที่ทำหน้าที่คล้ายกับการวางตำแหน่งแบบสัมบูรณ์ โดยมีความแตกต่างเล็กน้อย
ขั้นแรก องค์ประกอบที่มีตำแหน่งคงที่จะถูกวางตำแหน่งโดยสัมพันธ์กับหน้าต่างเบราว์เซอร์เสมอ และองค์ประกอบหลักจะถูกละเว้น
ความแตกต่างประการที่สองมาจากชื่อของมัน องค์ประกอบคงที่ได้รับการแก้ไขบนหน้า พวกเขาจะไม่เคลื่อนไหวเมื่อเลื่อน
ดัชนี Z
หน้าเว็บไซต์เป็นแบบสองมิติ มีความกว้างและความสูง Z-index เพิ่มมิติที่ 3 ความลึก
ยิ่งดัชนีนี้สูงเท่าไร องค์ประกอบก็จะยิ่งอยู่บนเพจมากขึ้นเท่านั้น ด้วยสิ่งนี้ เราจึงสามารถมั่นใจได้ว่าองค์ประกอบหนึ่งถูกวางทับอีกองค์ประกอบหนึ่ง โดยค่าเริ่มต้น ค่าของมันคือศูนย์ ค่าลบก็เป็นที่ยอมรับเช่นกัน
อันที่จริง ดัชนี z ซับซ้อนกว่าที่ฉันอธิบายไว้ที่นี่มาก แต่นั่นเป็นหัวข้อสำหรับบทความอื่น ตอนนี้สิ่งสำคัญที่ต้องจำคือแนวคิดเกี่ยวกับมิติที่สามและความจริงที่ว่าเฉพาะองค์ประกอบที่อยู่ในตำแหน่งเท่านั้นที่สามารถใช้คุณสมบัตินี้ได้
ปัญหาการวางตำแหน่ง
มาดูปัญหาทั่วไปบางประการที่เกี่ยวข้องกับการวางตำแหน่ง รวมถึงคำสองสามคำเกี่ยวกับวิธีแก้ปัญหาเหล่านั้น
- คุณไม่สามารถใช้คุณสมบัติตำแหน่งและคุณสมบัติลอยในองค์ประกอบเดียวกันในเวลาเดียวกันคุณสมบัติทั้งสองนี้ส่งผลต่อตำแหน่งขององค์ประกอบ ดังนั้นคุณสมบัติสุดท้ายที่ระบุจะถูกนำมาใช้
จากความคิดเห็น:
คุณสามารถใช้ตำแหน่ง:ญาติและลอยในเวลาเดียวกัน
เมื่อระบุตำแหน่ง:สัมบูรณ์และลอยพร้อมกัน จะไม่ใช่คุณสมบัติที่ระบุสุดท้ายที่ถูกนำไปใช้ ในกรณีนี้ โดยไม่คำนึงถึงลำดับของสไตล์เหล่านี้ ตำแหน่ง:สัมบูรณ์จะถูกนำไปใช้ และค่าผลลัพธ์ (หรือจากการคำนวณ) ของคุณสมบัติ float จะถูกตั้งค่าเป็น none โดยไม่คำนึงถึงค่าเริ่มต้น นั่นคือ ละเลย
- ระยะขอบไม่ยุบลงในองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนสมมติว่ามีย่อหน้าบนหน้าที่มีระยะขอบล่าง 20px ต่อไปนี้เป็นรูปภาพที่มีระยะขอบด้านบน 30px ระยะห่างระหว่างรูปภาพและข้อความจะไม่ใช่ 50px (20px + 30px) แต่เป็น 30px (30px > 20px) ลักษณะการทำงานนี้เรียกว่าการยุบระยะขอบ สองเยื้องจะรวมกันเป็นหนึ่งเดียว องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนไม่มีระยะขอบที่จะยุบ ดังนั้นผลลัพธ์อาจไม่เป็นไปตามที่คุณคาดหวัง
- IE และดัชนี zใน IE6 องค์ประกอบจะถูกเลือกที่ด้านบนของสแต็กเสมอ โดยไม่คำนึงถึงดัชนี z หรือดัชนี z ขององค์ประกอบโดยรอบ
IE6 และ IE7 มีปัญหาอื่นกับ z-index IE ดูที่องค์ประกอบหลักเพื่อกำหนดว่าองค์ประกอบใดที่อยู่ด้านบนสุดของสแต็ก เบราว์เซอร์อื่นๆ จะใช้บริบทสากล ตัวอย่างเช่น:
เราคาดว่าย่อหน้าจะปรากฏสูงกว่ารูปภาพเนื่องจากดัชนี z มีขนาดใหญ่กว่า อย่างไรก็ตาม IE6 และ IE7 จะวางรูปภาพให้สูงขึ้นเนื่องจากอยู่ในกองเอกสารที่แตกต่างกัน สแต็กหนึ่งมีไว้สำหรับ div ส่วนที่สองมีไว้สำหรับ img และรูปภาพมีดัชนี z สูงกว่า div
บทสรุป
คุณสมบัติตำแหน่งจะกำหนดพฤติกรรมการวางตำแหน่งขององค์ประกอบตามรูปแบบการวางตำแหน่งอย่างใดอย่างหนึ่ง ค่าคุณสมบัติที่มีอยู่คือค่าสัมบูรณ์ , ญาติ , คงที่ , คงที่ (ค่าเริ่มต้น) และสืบทอด
รูปแบบการวางตำแหน่งจะกำหนดกฎสำหรับการวางองค์ประกอบบนหน้าเว็บ รวมถึงอิทธิพลต่อตำแหน่งขององค์ประกอบข้างเคียง
คุณสมบัติดัชนี z สามารถใช้ได้กับองค์ประกอบที่มีชุดคุณสมบัติตำแหน่งเท่านั้น โดยจะเพิ่มมิติที่สามให้กับเพจและกำหนดลำดับสแต็กขององค์ประกอบ
คุณสมบัติของตำแหน่งดูเหมือนเข้าใจง่าย แต่ทำงานแตกต่างไปจากที่เห็นในตอนแรกเล็กน้อย บ่อยครั้งที่นักพัฒนาคิดว่าพวกเขาต้องการการวางตำแหน่งที่สัมพันธ์กัน แม้ว่ามีแนวโน้มมากที่สุดที่พวกเขาควรใช้การวางตำแหน่งแบบสัมบูรณ์ก็ตาม โดยพื้นฐานแล้ว คุณสมบัติ float จะถูกใช้ระหว่างเลย์เอาต์ และคุณสมบัติตำแหน่งนั้นจำเป็นสำหรับองค์ประกอบที่คุณต้องการ "นำออก" จากโฟลว์ทั่วไปของเอกสาร
ปัจจุบันนี้ นักพัฒนาเว็บสามารถสร้างเค้าโครงหน้าเว็บที่ซับซ้อนได้โดยใช้เทคนิค CSS ต่างๆ เทคนิคเหล่านี้บางส่วนมีประวัติอันยาวนาน (ลอยตัว) เทคนิคอื่นๆ (เฟล็กบ็อกซ์) ได้รับความนิยมในช่วงไม่กี่ปีที่ผ่านมา
ในบทความนี้ เราจะมาดูสิ่งที่รู้เล็กๆ น้อยๆ เกี่ยวกับการวางตำแหน่ง CSS โดยละเอียดยิ่งขึ้น
ก่อนที่เราจะเริ่มต้น เรามาทบทวนพื้นฐานของตำแหน่งประเภทต่างๆ กันก่อน
ภาพรวมของวิธีการกำหนดตำแหน่งที่ใช้ได้
คุณสมบัติตำแหน่ง CSS กำหนดประเภทของการวางตำแหน่งขององค์ประกอบ
ตัวเลือกการวางตำแหน่ง
static เป็นค่าคุณสมบัติการกำหนดตำแหน่งเริ่มต้น เราขอแนะนำว่าองค์ประกอบนี้ไม่ใช้การวางตำแหน่ง - การวางตำแหน่งจะใช้เฉพาะเมื่อคุณระบุประเภทการวางตำแหน่งอื่นที่ไม่ใช่ค่าเริ่มต้น
ในการดำเนินการนี้ คุณต้องตั้งค่าคุณสมบัติตำแหน่งเป็นค่าใดค่าหนึ่งต่อไปนี้:
- ญาติ
- แน่นอน
- ที่ตายตัว
- เหนียว
และหลังจากตั้งค่าตำแหน่งแล้วเท่านั้น คุณสามารถใช้คุณสมบัติที่ชดเชยองค์ประกอบได้:
- ขวา
- ด้านล่าง
- ค่าเริ่มต้นของคุณสมบัติเหล่านี้คือคำสำคัญอัตโนมัติ
ควรคำนึงว่าหากองค์ประกอบมีคุณสมบัติตำแหน่งที่ตั้งค่าเป็นสัมบูรณ์หรือคงที่ แสดงว่าองค์ประกอบนั้นมีตำแหน่งที่แน่นอน นอกจากนี้ คุณสมบัติดัชนี z เริ่มทำงานสำหรับองค์ประกอบที่มีตำแหน่ง ซึ่งจะกำหนดลำดับการเรียงซ้อน
ความแตกต่างระหว่างวิธีการกำหนดตำแหน่งหลัก
ตอนนี้เรามาดูความแตกต่างพื้นฐานสามประการระหว่างประเภทตำแหน่งที่ใช้ได้:
- องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอน (สัมบูรณ์) จะถูกลบออกจากสตรีมโดยสมบูรณ์ เพื่อนบ้านที่ใกล้ที่สุดจะเข้ามาแทนที่
- ตำแหน่งที่ค่อนข้าง (ญาติ) และติดกาว (เหนียว) ยังคงรักษาตำแหน่งไว้ในกระแสน้ำและเพื่อนบ้านที่ใกล้ที่สุดไม่ได้ครอบครอง อย่างไรก็ตาม การเสริมองค์ประกอบเหล่านี้ไม่ใช้พื้นที่ แต่องค์ประกอบอื่นๆ จะละเลยโดยสิ้นเชิง และอาจส่งผลให้องค์ประกอบซ้อนทับกัน
- องค์ประกอบคงที่ (และการวางตำแหน่งคงที่เป็นประเภทสัมบูรณ์) จะถูกวางตำแหน่งโดยสัมพันธ์กับพื้นที่การมองเห็นเสมอ (โดยไม่สนใจการมีอยู่ของตำแหน่งในบรรพบุรุษ) ในขณะที่องค์ประกอบที่ติดหนึบจะถูกวางตำแหน่งโดยสัมพันธ์กับบรรพบุรุษที่ใกล้ที่สุดด้วยการเลื่อน (โอเวอร์โฟลว์: อัตโนมัติ) และเฉพาะในกรณีที่ไม่มีบรรพบุรุษดังกล่าวเท่านั้นที่พวกเขาจะอยู่ในตำแหน่งที่สัมพันธ์กับโซนการมองเห็น
คุณสามารถดูรายละเอียดเพิ่มเติมได้ในการสาธิต:
หมายเหตุ: การวางตำแหน่งองค์ประกอบ Sticky ยังคงเป็นเทคโนโลยีทดลองที่มีการรองรับอย่างจำกัดในเบราว์เซอร์ แน่นอน หากคุณต้องการ คุณสามารถใช้ polyfill เพื่อเพิ่มฟังก์ชันนี้ให้กับเบราว์เซอร์ได้ แต่ด้วยความแพร่หลายที่ต่ำ คุณสมบัตินี้จะไม่ถูกกล่าวถึงในบทความ
องค์ประกอบการวางตำแหน่งด้วยประเภทการวางตำแหน่งแบบสัมบูรณ์
ฉันแน่ใจว่าคนส่วนใหญ่รู้ว่าการวางตำแหน่งแบบสัมบูรณ์ทำงานอย่างไร อย่างไรก็ตาม มีหลายสิ่งที่อาจทำให้ผู้เริ่มต้นสับสนได้
ดังนั้นฉันจึงตัดสินใจเริ่มต้นด้วยการอธิบายคุณลักษณะของการวางตำแหน่งที่ไม่ค่อยมีใครรู้จัก
ดังนั้น องค์ประกอบที่มีตำแหน่งที่แน่นอนจะถูกชดเชยโดยสัมพันธ์กับองค์ประกอบบรรพบุรุษที่อยู่ในตำแหน่งที่ใกล้ที่สุด แน่นอนว่าวิธีนี้ใช้ได้ผลหากบรรพบุรุษคนใดมีตำแหน่งอื่นที่ไม่ใช่แบบคงที่ หากองค์ประกอบไม่มีบรรพบุรุษที่มีตำแหน่ง องค์ประกอบนั้นจะถูกชดเชยโดยสัมพันธ์กับพื้นที่ที่มองเห็นได้
สิ่งนี้แสดงให้เห็นได้จากตัวอย่างต่อไปนี้:
ในการสาธิตนี้ บล็อกสีเขียวถูกวางตำแหน่งในตอนแรกโดยสมบูรณ์โดยมีช่องว่างภายในเป็นศูนย์ด้านล่าง:0 และซ้าย:0 บรรพบุรุษของบล็อกนั้น (บล็อกสีแดง) ไม่ได้ถูกวางตำแหน่งเลย
อย่างไรก็ตาม เราได้วางตำแหน่งเสื้อคลุมด้านนอกไว้ค่อนข้างมาก (องค์ประกอบที่มีคลาสจัมโบตรอน) สังเกตว่าตำแหน่งของบล็อกสีเขียวเปลี่ยนแปลงไปอย่างไรเมื่อประเภทการวางตำแหน่งของบรรพบุรุษเปลี่ยนแปลงไป
องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะละเว้นคุณสมบัติ float
หากเราใช้การวางตำแหน่งแบบสัมบูรณ์หรือแบบคงที่กับองค์ประกอบแบบลอย คุณสมบัติ float จะถูกตั้งค่าเป็น none ในทางกลับกัน ถ้าเราตั้งค่าการวางตำแหน่งที่สัมพันธ์กัน องค์ประกอบจะยังคงลอยอยู่
ดูการสาธิตที่เกี่ยวข้อง:
ในตัวอย่างนี้ เรากำหนดองค์ประกอบที่แตกต่างกันสองรายการที่ลอยไปทางขวา โปรดทราบว่าเมื่อบล็อกสีแดงอยู่ในตำแหน่งที่แน่นอน บล็อกจะละเว้นค่าของคุณสมบัติ float ในขณะที่บล็อกสีเขียวที่อยู่ในตำแหน่งที่ค่อนข้างจะคงค่า float ไว้
องค์ประกอบอินไลน์ที่มีตำแหน่งที่แน่นอนจะกลายเป็นองค์ประกอบบล็อก
องค์ประกอบอินไลน์ที่มีการวางตำแหน่งแบบสัมบูรณ์หรือคงที่จะใช้คุณสมบัติขององค์ประกอบบล็อก การแปลงองค์ประกอบอินไลน์เป็นองค์ประกอบบล็อกมีการอธิบายรายละเอียดเพิ่มเติมในตาราง
ในกรณีนี้ เราได้สร้างองค์ประกอบที่แตกต่างกันสองรายการ บล็อกแรก (บล็อกสีเขียว) เป็นองค์ประกอบบล็อก และบล็อกที่สอง (บล็อกสีแดง) เป็นองค์ประกอบแบบอินไลน์ ในตอนแรกจะมองเห็นได้เฉพาะบล็อกสีเขียวเท่านั้น
กล่องสีแดงไม่สามารถมองเห็นได้เนื่องจากคุณสมบัติความกว้างและความสูงใช้งานได้กับองค์ประกอบบล็อกและบล็อกอินไลน์เท่านั้น และเนื่องจากไม่มีเนื้อหา จึงไม่มีมิติใดๆ
เมื่อคุณกำหนดตำแหน่งที่แน่นอนหรือคงที่ให้กับบล็อกสีแดง มันจะกลายเป็นบล็อกบล็อกและขนาดบล็อกที่ระบุไว้จะมีผลใช้บังคับ
องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนไม่มีการยุบช่องว่างภายใน
ตามค่าเริ่มต้น เมื่อระยะขอบแนวตั้งสองอันสัมผัสกัน ระยะขอบแนวตั้งทั้งสองจะรวมกันเป็นหนึ่งเดียวเท่ากับค่าสูงสุด สิ่งนี้เรียกว่าการล่มสลายของมาร์จิ้น
พฤติกรรมขององค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนที่นี่จะคล้ายกับองค์ประกอบแบบลอย - ช่องว่างภายในขององค์ประกอบเหล่านั้นจะไม่รวมกับองค์ประกอบข้างเคียง
ในการสาธิตนี้ องค์ประกอบจะมีระยะห่างจากขอบ 20 พิกเซล ช่องว่างภายในจะยุบลงพร้อมกับช่องว่างภายในขององค์ประกอบหลักซึ่งมีขนาด 20 พิกเซลเช่นกัน อย่างที่คุณเห็นเฉพาะตำแหน่งที่แน่นอนเท่านั้นที่จะไม่มีการล่มสลาย
แต่เราจะป้องกันไม่ให้มาร์จิ้นพังทลายได้อย่างไร? เราจำเป็นต้องใส่ตัวคั่นระหว่างพวกมัน
ซึ่งอาจเป็นการเติมหรือเส้นขอบ และสามารถนำไปใช้กับทั้งองค์ประกอบหลักและองค์ประกอบย่อย อีกทางเลือกหนึ่งคือการเพิ่ม clearfix ให้กับองค์ประกอบหลัก
การจัดตำแหน่งองค์ประกอบด้วยพิกเซลและเปอร์เซ็นต์
คุณเคยใช้เปอร์เซ็นต์แทนพิกเซลเพื่อวางตำแหน่งองค์ประกอบหรือไม่? หากคำตอบคือใช่ คุณจะรู้ว่าออฟเซ็ตขององค์ประกอบนั้นขึ้นอยู่กับหน่วยที่เลือก (พิกเซลหรือเปอร์เซ็นต์)
มันสับสนเล็กน้อยใช่ไหม? ก่อนอื่นเรามาดูกันว่าข้อกำหนดพูดถึงเปอร์เซ็นต์ออฟเซ็ตอย่างไร:
ออฟเซ็ตเป็นเปอร์เซ็นต์ของความกว้าง (สำหรับซ้ายและขวา) หรือความสูง (บนหรือล่าง) ของบล็อกหลัก สำหรับองค์ประกอบที่ติดกาว ค่าชดเชยจะคำนวณเป็นเปอร์เซ็นต์ของความกว้าง (สำหรับซ้ายและขวา) หรือความสูง (บนหรือล่าง) ของการไหล ค่าลบเป็นที่ยอมรับได้
ตามที่กล่าวไว้ เมื่อคุณตั้งค่าออฟเซ็ตเป็นเปอร์เซ็นต์ ตำแหน่งขององค์ประกอบจะขึ้นอยู่กับความกว้างและความสูงขององค์ประกอบหลัก
การสาธิตแสดงความแตกต่างนี้:
ตัวอย่างนี้ใช้พิกเซลและเปอร์เซ็นต์สำหรับการชดเชย แน่นอน เมื่อคุณระบุออฟเซ็ตเป็นพิกเซล องค์ประกอบจะถูกย้ายไปยังตำแหน่งที่จำเป็น
และถ้าเราเลือกเปอร์เซ็นต์สำหรับออฟเซ็ต ผลลัพธ์จะขึ้นอยู่กับขนาดขององค์ประกอบหลัก ต่อไปนี้เป็นภาพที่แสดงวิธีคำนวณตำแหน่งใหม่:
หมายเหตุ: ดังที่คุณคงทราบแล้วว่าคุณสมบัติการแปลง (พร้อมกับฟังก์ชันการแปลต่างๆ) ยังช่วยให้คุณเปลี่ยนตำแหน่งขององค์ประกอบได้ แต่ในกรณีนี้ เมื่อใช้เปอร์เซ็นต์ การคำนวณจะขึ้นอยู่กับขนาดขององค์ประกอบเอง ไม่ใช่องค์ประกอบหลัก
บทสรุป
ฉันหวังว่าบทความนี้จะช่วยให้คุณเข้าใจตำแหน่งใน CSS ได้ดีขึ้น และชี้แจงความท้าทายบางประการ
สิ่งพิมพ์ที่เกี่ยวข้อง
