CSS: วิธีการมีตำแหน่ง: div แน่นอนภายในตำแหน่ง: Div div ไม่ถูกครอบตัดโดยโอเวอร์โฟลว์: ซ่อนอยู่ในภาชนะ

144

ฉันมี 3 ระดับdiv:

(สีเขียวด้านล่าง)ระดับชั้นนำด้วยdiv overflow: hiddenนี่เป็นเพราะฉันต้องการเนื้อหาบางส่วน (ไม่แสดงที่นี่) ภายในกล่องนั้นจะถูกครอบตัดหากมีขนาดเกินขนาดของกล่อง
(สีแดงด้านล่าง)ภายในนี้ผมต้องมีdiv position: relativeการใช้งานเฉพาะสำหรับสิ่งนี้คือสำหรับระดับถัดไป
(เป็นสีฟ้าด้านล่าง)ในที่สุดdivฉันก็ออกจากการไหลด้วยposition: absoluteแต่ฉันต้องการตำแหน่งที่สัมพันธ์กับสีแดงdiv(ไม่ใช่หน้า)

ฉันต้องการให้กล่องสีฟ้าถูกนำออกจากการไหลและขยายออกไปนอกกล่องสีเขียว แต่จะวางในตำแหน่งที่สัมพันธ์กับกล่องสีแดงดังที่:

อย่างไรก็ตามด้วยรหัสด้านล่างฉันได้รับ:

และนำposition: relativeกล่องสีแดงออกตอนนี้กล่องสีฟ้าได้รับอนุญาตให้ออกจากกล่องสีเขียว แต่ไม่ได้อยู่ในตำแหน่งที่เกี่ยวข้องกับกล่องสีแดงอีกต่อไป:

มีวิธีการ:

เก็บoverflow: hiddenในกล่องสีเขียว
กล่องสีฟ้าขยายออกไปนอกกล่องสีเขียวและอยู่ในตำแหน่งที่สัมพันธ์กับกล่องสีแดงหรือไม่?

แหล่งที่มาเต็มรูปแบบ:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

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

css overflow css-position

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

44

+1 สำหรับคำถามที่มีการจัดรูปแบบที่ดีและซอร์สโค้ด

— graphicdivine

การชี้แจง: ดังนั้นคุณต้องการให้กล่องสีน้ำเงิน (div-Most-div) สามารถไหลออกมาจากกล่องสีเขียว (div-Most div-div) แต่ซ่อนการซ่อนไว้ในกล่องสีเขียวได้หรือไม่ โดยพื้นฐานแล้วมีการล้นที่ซ่อนอยู่ในทุกสิ่งในกล่องสีเขียวยกเว้นกล่องสีน้ำเงินใช่ไหม?

— แอนโทนี่

แอนโทนี่ใช่ตรงนี้แหละ และฉันไม่สนใจว่าจะเกิดอะไรขึ้นกับกล่องสีแดง (# 2) ซึ่งอยู่ตรงนั้นเพื่อให้มีอิทธิพลต่อด้านบน / ขวาบนกล่องสีฟ้า (# 3)

— avernet

2

+1 สำหรับการอธิบายคำถามที่ฉันคิดว่ายากเกินกว่าจะอธิบายได้ แต่ต้องการคำตอบจริงๆ

— Andrew เหมา

position: fixedจะไม่สนใจoverflow:hiddenองค์ประกอบใด ๆ ที่มีอยู่

— Kevin Beal

48

เคล็ดลับที่ทำงานคือการตำแหน่งกล่อง # 2 กับแทนposition: absolute position: relativeเรามักจะวางposition: relativeบนกล่องด้านนอก (ที่นี่กล่อง # 2) เมื่อเราต้องการกล่องด้านใน (ที่นี่กล่อง # 3) ด้วยposition: absoluteการวางในตำแหน่งที่สัมพันธ์กับกล่องด้านนอก แต่จำไว้ว่า: เพื่อให้กล่อง # 3 อยู่ในตำแหน่งที่เกี่ยวข้องกับกล่อง # 2 กล่อง # 2 เพียงแค่ต้องวางตำแหน่ง ด้วยการเปลี่ยนแปลงนี้เราจะได้รับ:

และนี่คือรหัสเต็มรูปแบบที่มีการเปลี่ยนแปลงนี้:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

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

5

จริง ๆ แล้วฉันใช้แล้วposition: staticและมันก็ใช้ได้ดีกว่าสำหรับฉัน

— เจสัน

@ Jason น่าสนใจมาก ดังนั้นคุณกำลังบอกว่าคุณใช้position: staticบนกล่อง # 2 position: absoluteแทน

— avernet

1

คุณช่วยอธิบายได้ไหมว่าทำไมถึงabsoluteไม่ใช้คลิปrelativeทำไม่ได้?

— Andrew เหมา

1

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

— windmaomao

1

สงสัยว่ามีจุดประสงค์อะไรในการอธิบายสิ่งที่เห็นด้วยภาพโดยใช้สีเช่นนั้น ...

— ed1nh0

5

ไม่มีทางออกขลังของการแสดงบางสิ่งบางอย่างนอกภาชนะที่ซ่อนอยู่ล้น

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

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

ใช้เวลาในใจว่าถ้าคุณจะต้องตัดเนื้อหาบนแกน x (ซึ่งดูเหมือนจะเป็นกรณีของคุณในขณะที่คุณมีเพียงแค่กำหนดความกว้างของ div) overflow-x: hiddenคุณสามารถใช้

— เครื่องหนีบ
แหล่งที่มา

0

ฉันไม่เห็นวิธีการทำเช่นนี้ตามที่เป็นจริง ฉันคิดว่าคุณอาจต้องลบออกoverflow:hiddenจาก div # 1 และเพิ่ม div อื่นภายใน div # 1 (เช่นพี่น้องถึง div # 2) เพื่อเก็บ 'เนื้อหา' ที่ไม่ระบุและเพิ่มลงoverflow:hiddenไป ฉันไม่คิดว่าโอเวอร์โฟลว์สามารถ (หรือควรจะเป็น) มากเกินไป

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

0

หากมีเนื้อหาอื่นที่ไม่ได้แสดงอยู่ในด้านนอก div (ช่องสีเขียว) ทำไมไม่มีเนื้อหานั้นถูกรวมอยู่ใน div อื่นให้เรียกมันว่า "content"อื่นขอเรียกว่า ซ่อนเร้นไว้ใน div-in ใหม่นี้ แต่ให้มองเห็นโอเวอร์โฟลว์ในกล่องสีเขียว

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

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>

— แอนโทนี่
แหล่งที่มา