เนื่องจากความสะดวกและความคล่องตัวเพื่อที่จะแยกความแตกต่างจากองค์ประกอบอื่น ๆ จึงมีการเพิ่มคลาสบล็อกเข้าไป (ตัวอย่างที่ 1)

ตัวอย่างที่ 1: ภาพพื้นหลังสองรูป

HTML5 CSS3 IE Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 3.

ปัจจุบันการออกแบบเว็บไซต์เกือบทุกรูปแบบมีภาพพื้นหลังที่สวยงาม

นักออกแบบเลย์เอาต์ทุกคนรู้ดีว่าวิธีที่ง่ายที่สุดในการสร้างการออกแบบคือวิธีที่ดีที่สุด หนึ่งในเทคนิคที่ง่ายและสะดวกคือการใช้หลาย ๆ อย่าง บรรทัดของ cssรหัส.

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

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

โค้ด CSS สำหรับหลายพื้นหลัง

มีการใช้ภาพพื้นหลังหลายภาพโดยใช้ค่าหลายค่า พารามิเตอร์ CSSพื้นหลังซึ่งคั่นด้วยอาการโคม่า:

#multipleBGs ( พื้นหลัง: url(photo1.png), url(photo2.png), url(photo3.png) ; ซ้ำพื้นหลัง: ไม่ซ้ำ, ไม่ซ้ำ, ซ้ำ-y; ตำแหน่งพื้นหลัง: 0 0, 30px 70px ด้านบนขวา ความกว้าง: 400px ความสูง: 400px เส้นขอบ: 1px solid #ccc; )

ฉันพยายามทำเช่นเดียวกันกับรหัสสั้น ๆ น่าเสียดายที่มันใช้งานไม่ได้

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

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

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

). วันนี้เราจะพูดถึงฟีเจอร์ที่น่าสนใจอีกเล็กน้อย - การใช้รูปภาพหลายรูปในพื้นหลัง

องค์ประกอบพื้นหลัง

มีสาเหตุหลายประการที่คุณอาจต้องการจัดองค์ประกอบภาพหลายภาพในพื้นหลัง เหตุผลที่สำคัญที่สุดคือ:

• ประหยัดปริมาณการรับส่งข้อมูลตามขนาดของภาพ หากภาพแต่ละภาพมีน้ำหนักรวมน้อยกว่าภาพที่มีชั้นเรียบ และ
• ความต้องการพฤติกรรมที่เป็นอิสระของแต่ละเลเยอร์ เช่น เมื่อใช้เอฟเฟกต์พารัลแลกซ์

อาจมีเหตุผลที่สมเหตุสมผลอื่น ๆ :)

วิธีการแบบคลาสสิก

ดังนั้นเราจึงจำเป็นต้องวางภาพพื้นหลังหลายภาพไว้บนอีกภาพหนึ่ง โดยปกติปัญหานี้จะแก้ไขได้อย่างไร? ง่ายมาก: สำหรับภาพพื้นหลังแต่ละภาพ จะมีการสร้างบล็อกซึ่งกำหนดภาพพื้นหลังที่เกี่ยวข้องไว้ บล็อกจะซ้อนกันหรือวางเรียงกันเป็นแถวโดยมีกฎการวางตำแหน่งที่เหมาะสม นี่เป็นตัวอย่างง่ายๆ:

บล็อกที่มีคลาส "ตกปลา" ข้างใน "นางเงือก" มีไว้เพื่อการสาธิตเท่านั้น

ตอนนี้บางสไตล์:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing ( height:300px; width:480px; ตำแหน่ง: ญาติ; ) .sample1 .sea ( พื้นหลัง: url(media/sea.png) ทำซ้ำ-x ด้านซ้ายบน; ) .sample1 .mermaid ( พื้นหลัง: url(media/mermaid.svg) ซ้ำ-x ล่างซ้าย; ) .sample1 .fish ( พื้นหลัง: url(media/fish.svg) no-repeat; height:70px; width:100px; left : 30px; top: 90px; ตำแหน่ง: สัมบูรณ์; ) .sample1 .fishing ( พื้นหลัง: url(media/fishing.svg) ไม่ทำซ้ำด้านบนขวา 10px; )

ผลลัพธ์:

ในตัวอย่างนี้ มีสามพื้นหลังที่ซ้อนกันและหนึ่งบล็อกที่มีปลาอยู่ถัดจากบล็อก "พื้นหลัง" ตามทฤษฎีแล้ว ปลาสามารถเคลื่อนย้ายได้ เช่น โดยใช้ JavaScript หรือ CSS3 Transitions/Animations

อย่างไรก็ตาม ตัวอย่าง ".fishing" นี้ใช้ไวยากรณ์ใหม่สำหรับการวางตำแหน่งพื้นหลัง ซึ่งกำหนดไว้ใน CSS3 เช่นกัน:
พื้นหลัง: url (media/fishing.svg) ไม่ทำซ้ำด้านบนขวา 10px;
ขณะนี้รองรับ IE9+ และ Opera 11+ แต่ Firefox 10 และ Chrome 16 ไม่รองรับ ดังนั้นผู้ใช้เบราว์เซอร์สองตัวสุดท้ายจึงไม่สามารถจับปลาได้

พื้นหลังหลายแบบ

ตัวเลือกใหม่ที่เพิ่มให้กับ CSS3 มาเพื่อช่วยเหลือ - ความสามารถในการกำหนดภาพพื้นหลังหลายภาพสำหรับองค์ประกอบเดียว ดูเหมือนว่านี้:

และรูปแบบที่สอดคล้องกัน:
.sample2 .sea ( height:300px; width:480px; ตำแหน่ง: ญาติ; ภาพพื้นหลัง: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); ตำแหน่งพื้นหลัง: ขวาบน 10px, ซ้ายล่าง, ซ้ายบน; ซ้ำพื้นหลัง: ไม่ซ้ำ, ทำซ้ำ-x, ทำซ้ำ-x ; ) .sample2 .fish ( พื้นหลัง: url("media/fish.svg ") ไม่ทำซ้ำ; ความสูง:70px; ความกว้าง:100px; ซ้าย: 30px; ด้านบน: 90px; ตำแหน่ง: สัมบูรณ์; )
หากต้องการกำหนดหลายภาพ คุณต้องใช้กฎภาพพื้นหลัง โดยแสดงรายการแต่ละภาพโดยคั่นด้วยเครื่องหมายจุลภาค กฎเพิ่มเติมรวมถึงรายการสามารถกำหนดตำแหน่ง การทำซ้ำ และพารามิเตอร์อื่นๆ สำหรับแต่ละภาพได้ สังเกตลำดับการแสดงรูปภาพ: เลเยอร์จะแสดงรายการจากซ้ายไปขวาจากบนสุดไปล่างสุด

ผลลัพธ์ก็เหมือนกันทุกประการ:

กฎข้อหนึ่ง

หากไม่จำเป็นต้องแยกปลาออกเป็นบล็อกแยกต่างหากสำหรับการปรับเปลี่ยนในภายหลัง สามารถเขียนรูปภาพทั้งหมดใหม่ได้ด้วยกฎง่ายๆ เพียงข้อเดียว:

รูปแบบ:
.sample3 .sea ( height:300px; width:480px; ตำแหน่ง: ญาติ; ภาพพื้นหลัง: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); ตำแหน่งพื้นหลัง: ด้านบนขวา 10px, ซ้ายล่าง, 30px 90px, ซ้ายบน; พื้นหลังซ้ำ: ไม่ซ้ำ, ทำซ้ำ-x ; )

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

ในกรณีนี้จะเทียบเท่ากับคำอธิบายนี้:
พื้นหลังซ้ำ: ไม่ซ้ำ, ซ้ำ-x, ไม่ซ้ำ, ซ้ำ-x;

สั้นกว่าด้วยซ้ำ

หากคุณจำ CSS 2.1 ได้ มันจะกำหนดความสามารถในการอธิบายภาพพื้นหลังในรูปแบบย่อ หลายภาพแล้วไง? สิ่งนี้ก็เป็นไปได้เช่นกัน:

Sample4 .sea ( height:300px; width:480px; ตำแหน่ง: ญาติ; พื้นหลัง: url("media/fishing.svg") ด้านบนขวา 10px ไม่ซ้ำ, url("media/mermaid.svg") ล่างซ้าย ซ้ำ-x , url("media/fish.svg") 30px 90px ไม่ทำซ้ำ, url("media/sea.png") ทำซ้ำ-x; )

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

ภาพแบบไดนามิก

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

นี่คือตัวอย่างจากชีวิต - ธีมที่มีดอกแดนดิไลอันในยานเดกซ์:


หากคุณดูโค้ดคุณจะเห็นสิ่งนี้:

...

บล็อกที่มีคลาส "b-fluff-bg", "b-fluff__cloud" และ "b-fluff__item" มีภาพพื้นหลังที่ทับซ้อนกัน นอกจากนี้ พื้นหลังที่มีเมฆจะเลื่อนอยู่ตลอดเวลา และดอกแดนดิไลออนก็บินผ่านหน้าจอ

สิ่งนี้สามารถเขียนใหม่โดยใช้หลายพื้นหลังได้หรือไม่ โดยหลักการแล้ว ใช่ แต่ขึ้นอยู่กับ 1) การสนับสนุนคุณลักษณะนี้ในเบราว์เซอร์เป้าหมาย และ... 2) อ่านต่อ;)

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

หากต้องการเพิ่มภาพเคลื่อนไหวให้กับพื้นหลังปลา คุณสามารถใช้โค้ดต่อไปนี้:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var นางเงือกX = 0; var t = 0; ฟังก์ชั่น AnimationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) นางเงือกX = 0; ปลา Y = -10 + (10 * Math.cos(t * 0.091)); fishX = 10 + (5 * Math.sin(t * 0.07)); sea.style.พื้นหลังตำแหน่ง = "บนสุด" + fishY + "px ขวา" + fishX + "px, " + นางเงือกX + "px ล่าง" + fishesX + "px" + fishesY + "px ซ้ายบน"; window.requestAnimFrame (animationLoop); ) แอนิเมชันลูป(); ));
ที่ไหน
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (ฟังก์ชั่น (โทรกลับ) ( window.setTimeout (โทรกลับ, 1,000 / 60 ); )); ))();

อย่างไรก็ตาม แอนิเมชั่นสามารถทำได้โดยใช้ CSS3 Transitions/Animations แต่นี่เป็นหัวข้อสำหรับการอภิปรายแยกต่างหาก

Parallax และการโต้ตอบ

สุดท้ายนี้ การซ้อมรบที่คล้ายกันสามารถเพิ่มเอฟเฟกต์พารัลแลกซ์หรือการโต้ตอบแบบโต้ตอบกับพื้นหลังได้อย่างง่ายดาย:

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

Sea.style.พื้นหลังตำแหน่ง = "บนสุด" + fishY + "px ขวา" + fishX + "px, " + นางเงือกX + "px ล่าง" + fishesX + "px" + fishesY + "px ซ้ายบน";

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

แล้วความเข้ากันได้ล่ะ?

เบราว์เซอร์ยอดนิยมเวอร์ชันใหม่ทั้งหมด รวมถึง IE9+ รองรับรูปภาพหลายรูป (คุณสามารถตรวจสอบได้ เช่น Caniuse)

คุณยังสามารถใช้ Modernizr เพื่อมอบโซลูชันทางเลือกสำหรับเบราว์เซอร์ที่ไม่รองรับหลายพื้นหลังได้ ตามที่ Chris Coyier เขียนไว้ในโพสต์ของเขาเกี่ยวกับลำดับเลเยอร์เมื่อใช้หลายพื้นหลัง ให้ทำดังนี้:

Multiplebgs body ( /* การประกาศ BG หลายอันที่ยอดเยี่ยมซึ่งอยู่เหนือความเป็นจริงและลูกไก่ไร้เหตุผล */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
หากคุณกังวลเกี่ยวกับการใช้ JS เพื่อให้มีความเข้ากันได้แบบย้อนหลัง คุณสามารถประกาศพื้นหลังได้สองครั้ง แม้ว่าจะมีข้อเสียอยู่ในรูปแบบของการโหลดทรัพยากรซ้ำซ้อน (ขึ้นอยู่กับการใช้งานการประมวลผล CSS ในเบราว์เซอร์เฉพาะ):

/* ทางเลือก bg หลายรายการ */ พื้นหลัง: #000 url(...) ...; /* การประกาศ BG หลายรายการที่ยอดเยี่ยมซึ่งอยู่เหนือความเป็นจริงและลูกไก่ไร้เหตุผล */ url พื้นหลัง(...), url(...), url(...), #000 url(...);

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

ปล. ในหัวข้อ: ฉันอดไม่ได้ที่จะจำบทความมหัศจรรย์เกี่ยวกับ .

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

สิ่งนี้มีประโยชน์ในหลายกรณีและหลายช่วงเวลา โดยเฉพาะอย่างยิ่งการใช้องค์ประกอบหลอกในกรณีนี้ เนื่องจากมีพารามิเตอร์ที่ยืดหยุ่นมาก

ภาพพื้นหลังมากมาย

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

Blockimg( พื้นหลัง: url("img/img2.png"),/*พื้นหลังบนสุด จากนั้นตามลำดับ*/ url("img/img3.png"), url("img/img1.jpg"); background-position : ศูนย์กลาง 370px, 120px 150px, ศูนย์กลาง;/*ตำแหน่งของรูปภาพ*/ พื้นหลัง-ซ้ำ: ไม่ซ้ำ;/*รูปภาพซ้ำ*/ สีพื้นหลัง: #444;/*หากจำเป็นต้องใช้สีพื้นหลัง*/ กล่อง-เงา: 0 1px 2px rgba(0, 0, 0, 0.1); ระยะขอบ: 100px อัตโนมัติ 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; ) /*shortened version*/ blockimg ( พื้นหลัง: url("img/img2.png") ไม่ทำซ้ำ 370px center, url("img/img3.png") ไม่ทำซ้ำ 120px 150px, url("img/img1.jpg") ไม่ทำซ้ำตรงกลาง ศูนย์กลาง ; ระยะขอบ: 100px อัตโนมัติ 15px; ขนาดกล่อง: border-box; การขยาย: 25px; ความกว้าง: 700px; ความสูงขั้นต่ำ: 300px; )

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

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

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

ภาพพื้นหลังผ่านองค์ประกอบหลอก

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

Blockimg( พื้นหลัง: url("img/img1.jpg") ไม่ทำซ้ำ;/*พื้นหลังองค์ประกอบ*/ ตำแหน่ง:สัมพัทธ์;/*พื้นที่การวางตำแหน่ง*/ ระยะขอบ: 200px อัตโนมัติ 15px; ขนาดกล่อง: กรอบขอบ; การขยาย: 25px; width:700px; min-height: 300px; ) .blockimg::before( พื้นหลัง: url("img/img1.png") ไม่ซ้ำจุดกึ่งกลาง จุดศูนย์กลาง ด้านล่าง: 0; เนื้อหา: ""; ความสูง: 295px; ซ้าย: 0; ตำแหน่ง: สัมบูรณ์;/*ตำแหน่งสัมบูรณ์*/ ขวา: 0; บน: -150px; )

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

แทนที่จะเป็นองค์ประกอบอื่น แม้ว่าอย่างเป็นทางการแล้วมันจะกลายเป็นพื้นที่ที่แยกจากกัน เราก็ใช้องค์ประกอบหลอก เราให้ตำแหน่งที่แน่นอนและวางไว้ในตำแหน่งที่เราต้องการ