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>

Absolutely positioned box inside a box with overflow: auto or hidden bu konuda daha fazla ayrıntı ekledim.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Android Central

    Android Cent

    13 Kasım 2008
  • ExcelTutorials

    ExcelTutoria

    2 Mayıs 2009
  • Influencer Plus

    Influencer P

    2 Ocak 2013