422

ฉันมีdivตำแหน่งเริ่มต้น (เช่นposition:static) และ a divพร้อมfixedตำแหน่ง

ถ้าฉันตั้งค่าดัชนี z ขององค์ประกอบดูเหมือนว่าเป็นไปไม่ได้ที่จะทำให้องค์ประกอบคงที่อยู่ด้านหลังองค์ประกอบคงที่

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }

    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>

ขยายตัวอย่างข้อมูล

หรือบน jsfiddle ที่นี่: http://jsfiddle.net/mhFxf/

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

(ดูเหมือนว่าจะมีคำถามที่คล้ายกันกับเรื่องนี้ ( ดัชนีการวางตำแหน่งคงที่ที่ทำลายดัชนี z ) แต่ก็ไม่มีคำตอบที่น่าพอใจดังนั้นฉันถามคำถามนี้ที่นี่พร้อมรหัสตัวอย่าง)

css z-index

— DanSingerman
แหล่งที่มา

146

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

โซลูชั่น

<html>องค์ประกอบบริบทเฉพาะซ้อนของคุณดังนั้นเพียงแค่ทำตามกฎซ้อนภายในบริบทซ้อนและคุณจะเห็นองค์ประกอบที่ซ้อนกันในลำดับนี้

องค์ประกอบรูทของบริบทการสแต็ก ( <html>องค์ประกอบในกรณีนี้)

องค์ประกอบที่วางตำแหน่ง (และลูก ๆ ของพวกเขา) ที่มีค่าลบดัชนี z (ค่าที่สูงกว่าจะซ้อนกันในด้านหน้าของค่าที่ต่ำกว่าองค์ประกอบที่มีค่าเดียวกันจะซ้อนกันตามลักษณะที่ปรากฏใน HTML)

องค์ประกอบที่ไม่มีตำแหน่ง (จัดเรียงตามลักษณะที่ปรากฏใน HTML)

องค์ประกอบที่จัดตำแหน่ง (และลูก ๆ ) ด้วยค่าดัชนี z ของอัตโนมัติ (จัดเรียงตามลักษณะที่ปรากฏใน HTML)

องค์ประกอบที่วางตำแหน่ง (และลูก ๆ ของพวกเขา) ที่มีค่าดัชนี z บวก (ค่าที่สูงกว่าจะซ้อนกันในด้านหน้าของค่าที่ต่ำกว่าองค์ประกอบที่มีค่าเดียวกันจะซ้อนกันตามลักษณะที่ปรากฏใน HTML)

คุณสามารถ

ตั้งค่าดัชนี z ของ -1 สำหรับ#underตำแหน่ง -ve z-index ปรากฏหลัง#overองค์ประกอบที่ไม่ได้จัดตำแหน่ง
กำหนดตำแหน่ง#overเป็นrelativeเพื่อให้กฎ 5 ใช้กับมัน

ปัญหาที่แท้จริง

นักพัฒนาควรรู้สิ่งต่อไปนี้ก่อนที่จะพยายามเปลี่ยนลำดับการสแต็กขององค์ประกอบ

เมื่อบริบทการสแต็กเกิดขึ้น
- โดยค่าเริ่มต้น<html>องค์ประกอบเป็นองค์ประกอบรูทและเป็นบริบทการสแต็กแรก
ลำดับการซ้อนภายในบริบทการสแต็ก

ลำดับการซ้อนและกฎบริบทการซ้อนด้านล่างมาจากลิงค์นี้

เมื่อบริบทการสแต็กเกิดขึ้น

เมื่อองค์ประกอบคือองค์ประกอบหลักของเอกสาร ( <html>องค์ประกอบ)
เมื่อองค์ประกอบมีค่าตำแหน่งอื่นที่ไม่ใช่แบบคงที่และค่าดัชนี z อื่น ๆ ที่ไม่ใช่อัตโนมัติ
เมื่อองค์ประกอบมีค่าความทึบแสงน้อยกว่า 1
คุณสมบัติ CSS ที่ใหม่กว่าหลายรายการยังสร้างบริบทการสแต็ก สิ่งเหล่านี้รวมถึง: การแปลงตัวกรองภูมิภาค CSS สื่อเพจและอื่น ๆ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
ตามกฎทั่วไปดูเหมือนว่าหากคุณสมบัติ CSS ต้องการการเรนเดอร์ในบริบทนอกจอมันจะต้องสร้างบริบทการสแต็กใหม่

คำสั่งการสแต็คภายในบริบทการซ้อน

ลำดับขององค์ประกอบ:

องค์ประกอบรูทของบริบทการสแต็ค ( <html>องค์ประกอบเป็นบริบทการสแต็คเดียวโดยค่าเริ่มต้น แต่องค์ประกอบใด ๆ สามารถเป็นองค์ประกอบรูทสำหรับบริบทการสแต็กดูกฎด้านบน)
- คุณไม่สามารถวางองค์ประกอบลูกหลังองค์ประกอบบริบทการซ้อนราก
องค์ประกอบที่วางตำแหน่ง (และลูก ๆ ของพวกเขา) ที่มีค่าลบดัชนี z (ค่าที่สูงกว่าจะซ้อนกันในด้านหน้าของค่าที่ต่ำกว่าองค์ประกอบที่มีค่าเดียวกันจะซ้อนกันตามลักษณะที่ปรากฏใน HTML)
องค์ประกอบที่ไม่มีตำแหน่ง (จัดเรียงตามลักษณะที่ปรากฏใน HTML)
องค์ประกอบที่จัดตำแหน่ง (และลูก ๆ ) ด้วยค่าดัชนี z ของอัตโนมัติ (จัดเรียงตามลักษณะที่ปรากฏใน HTML)
องค์ประกอบที่วางตำแหน่ง (และลูก ๆ ของพวกเขา) ที่มีค่าดัชนี z บวก (ค่าที่สูงกว่าจะซ้อนกันในด้านหน้าของค่าที่ต่ำกว่าองค์ประกอบที่มีค่าเดียวกันจะซ้อนกันตามลักษณะที่ปรากฏใน HTML)

— Mr_Moneybags
แหล่งที่มา

3

บางคนอาจพบว่าสิ่งนี้มีประโยชน์เช่นกัน: ไม่มีใครบอกคุณเกี่ยวกับดัชนี Z

— Mentalist

450

เพิ่มposition: relative;ใน #over

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }

    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>

ขยายตัวอย่างข้อมูล

ซอ

— stephenmurdoch
แหล่งที่มา

14

updates.html5rocks.com/2012/09/…เป็นข้อมูลอ้างอิงที่ดีเยี่ยมเกี่ยวกับวิธีการที่ตำแหน่งคงที่สัมบูรณ์และการโต้ตอบสัมพันธ์กับดัชนี z

— ทำ

@marflar ความสุขของฉัน Btw, ดูซอของคุณ มีแท็กพิเศษ</body>และแท็กพิเศษ</html>ในท้ายที่สุด

— Michel Ayres

2

นี่คือซอแสดงให้เห็นถึงบริบทการซ้อน มันอธิบายที่นี่

— kdbanman

การลบposition: relativeจากองค์ประกอบที่เกินได้แก้ไขปัญหาของฉันได้จริง

— Alex G

Thanksssssss <3

— Karl Anthony Baluyot

32

ดัชนี zทำงานเฉพาะภายในคือบริบทโดยเฉพาะอย่างยิ่งrelative, fixedหรือabsoluteตำแหน่ง

ดัชนี zสำหรับ div div ไม่มีส่วนเกี่ยวข้องกับz-indexdiv อย่างแน่นอนหรือตายตัว

แก้ไข ~~นี่เป็นคำตอบที่ไม่สมบูรณ์~~ คำตอบนี้ให้ข้อมูลเท็จ โปรดตรวจสอบความคิดเห็นของ @ Dansingerman และตัวอย่างด้านล่าง

— cusimar9
แหล่งที่มา

3

คุณสามารถขยายวิธีการทำงานของดัชนี z ในบริบทเฉพาะและ / หรือให้การอ้างอิงได้หรือไม่?

— DanSingerman

13

z-index ส่งผลกระทบต่อคำสั่งของสอง div แม้ว่าหนึ่งในนั้นจะสัมพันธ์กับตำแหน่ง

— Raffael

65

คำตอบนี้ผิด นี่คือไวโอลินแสดงให้เห็นถึงการซ้อนบริบทที่มันจะมีการอธิบายที่นี่ @Dansingerman

— kdbanman

1

ขอบคุณสำหรับ jsFiddle @kbdanman ของคุณมันช่วยให้ฉันเข้าใจบริบทการซ้อนด้วยภาพ

— dhruvpatel

8

@ JoeMorano, z ที่สูงกว่านั้นอยู่ใกล้กับจุดสูงสุดโดยไม่คำนึงถึงตำแหน่งแน่นอนหรือสัมพัทธ์ สิ่งที่สำคัญคือระดับในแผนผังเอกสาร Divs 4, 5, 6 เป็นลูกของ div 3 ในขณะที่ divs 1 และ 2 เป็นพี่น้องของ div 3 Div 1 มีค่า z สูงกว่า div 3 ดังนั้น div 1 จึงอยู่ด้านบนของ div 3 และลูกทั้งหมดของมัน Div 2 มีค่า z ต่ำกว่า div 3 ดังนั้น div 3 และลูกทั้งหมดของมันอยู่ด้านบนของ div 2

— kdbanman

31

เนื่องจากoverdiv ของคุณไม่มีตำแหน่งดังนั้นดัชนี z จึงไม่ทราบตำแหน่งและวิธีการจัดวางตำแหน่งนั้น (และด้วยความเคารพต่อสิ่งใด) เพียงแค่เปลี่ยนตำแหน่งของคุณไปเป็นญาติดังนั้นไม่มีผลข้างเคียงกับ div นั้นแล้ว div ใต้จะเป็นไปตามความต้องการของคุณ

นี่คือตัวอย่างของคุณใน jsfiddle: Fiddle

แก้ไข : ฉันเห็นบางคนพูดถึงคำตอบนี้แล้ว!

— ฉันจริงจัง
แหล่งที่มา

18

ให้#underผลลบz-indexเช่น-1

สิ่งนี้เกิดขึ้นเนื่องจากz-indexคุณสมบัติถูกละเว้นposition: static;ซึ่งเกิดขึ้นเป็นค่าเริ่มต้น ดังนั้นในโค้ด CSS ที่คุณเขียนz-indexเป็นองค์ประกอบทั้งสองไม่ว่าสูงคุณตั้งไว้ใน1#over

โดยให้#underค่าลบก็จะเป็นที่อยู่เบื้องหลังใด ๆองค์ประกอบคือz-index: 1;#over

— Carlos Precioso
แหล่งที่มา

ฉันมีปัญหานี้เช่นกัน - การตั้งค่า 'ใต้' div เป็น 0 ใช้ได้สำหรับฉัน

— มิกเซียร์

5

ฉันกำลังสร้างเมนูการนำทาง ฉันมีoverflow: hiddenในไฟล์นำทางของฉันซึ่งซ่อนทุกอย่างไว้ ฉันคิดว่ามันเป็นปัญหาดัชนี z แต่จริงๆฉันก็ซ่อนทุกอย่างนอก nav ของฉัน

— thedanotto
แหล่งที่มา

3

เมื่อองค์ประกอบอยู่ในตำแหน่งภายนอกการไหลปกติพวกเขาสามารถทับองค์ประกอบอื่น ๆ

ตามส่วนองค์ประกอบที่ทับซ้อนกันบนhttp://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp

— เหงียนเย็น
แหล่งที่มา

0

พฤติกรรมขององค์ประกอบคงที่ (และองค์ประกอบที่แน่นอน) ตามที่กำหนดไว้ใน CSS Spec:

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

สิ่งนี้ทำให้การคำนวณ zindex ซับซ้อนเล็กน้อยฉันแก้ไขปัญหาของฉัน (สถานการณ์เดียวกัน) โดยการสร้างคอนเทนเนอร์ในองค์ประกอบของร่างกายและย้ายองค์ประกอบดังกล่าวทั้งหมด (ซึ่งเป็น class-ed เป็น "my-fixed-ones" ภายในองค์ประกอบระดับร่างกายนั้น )

— Bakhshi
แหล่งที่มา

ดัชนี z ไม่ทำงานกับตำแหน่งที่แน่นอน

โซลูชั่น

ปัญหาที่แท้จริง

เมื่อบริบทการสแต็กเกิดขึ้น

คำสั่งการสแต็คภายในบริบทการซ้อน