การวางตำแหน่งขององค์ประกอบ CSS - การวางตำแหน่งบล็อก ตำแหน่งที่แน่นอนและสัมพันธ์กัน จะเลือกอะไรหรือวิธีการอะไร

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

คุณสมบัติขององค์ประกอบบล็อก

แท็กที่ถูกบล็อกประกอบด้วยแท็กที่เน้นแท็กจำนวนมาก ข้อมูลข้อความ:

,
,

,

,

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

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

    การไหลของเอกสาร

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

    องค์ประกอบการวางตำแหน่ง

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

    • ญาติ;
    • แน่นอน;
    • ที่ตายตัว;
    • คงที่.

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

    ตำแหน่งสัมพัทธ์

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

    การใช้คุณสมบัติสำหรับการกำหนดตำแหน่งสัมพัทธ์

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

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

    ตำแหน่งที่แน่นอน

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

    การจัดองค์ประกอบให้อยู่ตรงกลาง

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

    ตำแหน่งที่สัมพันธ์กับมุมซ้ายบนของเบราว์เซอร์

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

    ตำแหน่งสัมพันธ์กับมุมขวาบนของเบราว์เซอร์

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

    ระบบพิกัดสำหรับตำแหน่งที่แน่นอน

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

    จุดอ้างอิงสำหรับองค์ประกอบที่มีตำแหน่งที่แน่นอน

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

    ตำแหน่งคงที่

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

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

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

    การวางตำแหน่งผ่านการลอย

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

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

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

    คุณสมบัติ float รับค่าหลายค่า โดยค่าที่ได้รับความนิยมมากที่สุด 2 ค่าคือค่าซ้ายและขวา ซึ่งทำให้องค์ประกอบลอยไปทางซ้ายหรือขวาของค่าแม่

    Img ( ลอย: ซ้าย; )

    ลอยในทางปฏิบัติ

    มาสร้างเค้าโครงหน้าทั่วไปโดยมีส่วนหัวอยู่ด้านบน สองคอลัมน์ตรงกลาง และส่วนท้ายที่ด้านล่าง ตามหลักการแล้ว หน้านี้ควรมาร์กอัปด้วยองค์ประกอบต่างๆ

    ,
    ,