CSS: pozisyon var:bir position:relative div içinde mutlak bir div konteyner gizli taşma tarafından kırpılmış:olmaz

SORU

11 ŞUBAT 2010, PERŞEMBE

CSS: pozisyon var:bir position:relative div içinde mutlak bir div konteyner gizli taşma tarafından kırpılmış:olmaz

div 3 seviye var:

(Yeşil altında)Bir üst düzey 3* *overflow: hidden ile. Bu bazı içerik (burada gösterilen) o kutunun içinde kutunun boyutunu aşarsa kırpılmış istiyorum çünkü.
(Aşağıdaki kırmızı)Bunun içinde, position: relative div var. Bunun için sadece bir sonraki seviyeye için.
(Mavi aşağıda)Sonunda position: absolute akış çıktım ama konumlandırılmış istiyorum div bir Kızıl göre div (sayfa).

Mavi kutu akışını edilmesi ve yeşil kutunun dışına taşan, ama konumlandırılmış olması için kırmızı kutuya göre isterim:

alt text

Ancak, aşağıdaki kod ile alıyorum:

alt text

Ve kırmızı kutu position: relative çıkarma, şimdi mavi kutu yeşil kutu almak için izin verilir, ama kırmızı kutu için artık göreceli bir konumda değildir:

alt text

Bunu yapmak için bir yoldur:

Yeşil kutu overflow: hidden tutun.
Mavi kutu yeşil kutu dışına taşan ve kırmızı kutuya göre konumlandırılmış olması?

Tam kaynak, test iyiliği için satır içi CSS ile:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>
        <br/><br/><br/>
        <div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
            <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>
    </body>
</html>

CEVAP

11 ŞUBAT 2010, PERŞEMBE

Çalışan bir hile kutusu position: relative yerine position: absolute #2 pozisyon için. Biz genellikle bir position: relative bir dış kutusunda (burada kutu #2) istediğimiz bir iç kutu (box #3) position: absolute için konumlandırılmış göreli dış kutusu. Kutusu #2, kutuya göre konacak #3 #2 sadece konumlandırılmış olması gerekir için kutu. ama unutmayın: Bu değişiklik ile gelir. alt text

Ve işte bu değişiklik ile tam kodu

<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>