CSS: Konum sahibi olma: konum içinde mutlak div: göreceli div taşma ile kırpılmayacak: bir kapta gizlenmiş

144

3 seviye var div:

(Aşağıdaki yeşil renkte) Bir üst seviyeye divsahip overflow: hidden. Bunun nedeni, kutunun boyutunu aşarsa o kutunun içindeki bazı içeriklerin (burada gösterilmiyor) kırpılmasını istememdir.
(In aşağıda kırmızı) bu İçerde, ben divile position: relative. Bunun tek kullanımı bir sonraki seviye içindir.
(Aşağıdaki mavi renkte) Sonunda a divile akıştan çıkarıyorum position: absoluteama kırmızıya göre konumlandırılmasını istiyorum div(sayfaya değil).

Mavi kutunun akıştan çıkarılmasını ve yeşil kutunun ötesine geçmesini istiyorum, ancak kırmızı kutuya göre şu şekilde konumlandırılmalıdır:

Ancak, aşağıdaki kod ile elde:

Ve position: relativekırmızı kutuyu kaldırdığınızda , şimdi mavi kutunun yeşil kutudan çıkmasına izin verilir, ancak artık kırmızı kutuya göre konumlandırılmamıştır:

Bunun bir yolu var mı:

overflow: hiddenYeşil kutunun üzerinde tutun .
Mavi kutu yeşil kutunun ötesine mi genişledi ve kırmızı kutuya göre konumlandırıldı mı?

Tam kaynak:

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

Snippet'i genişlet

css overflow css-position

— avernet
kaynak

44

Biçimlendirilmiş soru ve kaynak kodu için +1

— graphicdivine

Açıklama: Yani mavi kutunun (en içteki div) yeşil kutudan (en dıştaki div) taşmasını ancak taşan kutunun yeşil kutuda gizli kalmasını mı istiyorsunuz? Yani temelde, mavi kutu hariç yeşil kutudaki her şeye taşma var, doğru mu?

— Anthony

Anthony, evet, aynen öyle. Ve kırmızı kutuya (# 2) ne olduğu umurumda değil, sadece mavi kutunun üstünü / sağını (# 3) etkilemek için orada.

— avernet

2

Açıklamak için çok zor olduğunu düşündüğüm bir soruyu doğru bir şekilde açıkladığınız için +1 ama gerçekten bir cevap istedim.

— Andrew Mao

position: fixedoverflow:hiddeniçeren herhangi bir öğeyi yok sayar.

— Kevin Beal

48

Çalışan bir numara position: absoluteyerine # 2 kutusunu konumlandırmaktır position: relative. position: relativeDış kutuya position: absolutegöre konumlandırılmak üzere bir iç kutu (burada kutu # 3) olmasını istediğimizde genellikle bir dış kutu (burada kutu # 2) üzerine koyarız . Ancak unutmayın: 3 numaralı kutunun 2 numaralı kutuya göre konumlandırılması için 2 numaralı kutunun konumlandırılması yeterlidir. Bu değişiklikle şunları elde ederiz:

Ve bu değişiklikle birlikte tam kod:

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

5

Aslında kullandım position: staticve bu benim için daha iyi çalıştı

— Jason

@ Jason, çok ilginç; yani position: staticbunun yerine # 2 kutusunu kullandığınızı söylüyorsunuz position: absolute.

— avernet

1

Neden absoluteklipslenmediğini, ancak neden detaylandırdığını açıklayabilir misiniz relative?

— Andrew Mao

1

Bu çözüm, # 1 ve # 3 arasında her şeyi mutlak olmak için yapmadığınız sürece çalışmaz. Pratik olarak, bu imkansız.

— windmaomao

1

Bunun gibi renkleri kullanarak SO görsel bir şey açıklamak amacının ne olduğunu merak ...

— ed1nh0

5

Taşan gizli bir kabın dışında bir şey görüntülemenin sihirli bir çözümü yoktur.

Benzer bir etki, geçerli göreli kabınızın içine yerleştirerek üst öğesinin boyutuyla eşleşen mutlak konumlandırılmış bir div değerine sahip olarak elde edilebilir (kırpmak istemediğiniz div bu div dışında olmalıdır):

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

Yalnızca x eksenindeki içeriği kırpmanız gerekiyorsa (yalnızca div'in genişliğini ayarladığınız için durumunuz gibi görünüyorsa) kullanabileceğinizi unutmayın overflow-x: hidden.

— mengene
kaynak

0

Bunu olduğu gibi yapmanın bir yolunu gerçekten görmüyorum. overflow:hiddenBelirtilmemiş 'içeriği' tutmak ve overflow:hiddenbunun yerine eklemek için div # 1 kaldırmak ve div # 1 (div # 2 için kardeş olarak) başka bir div eklemek gerekebilir düşünüyorum . Taşmanın aşırı basmış olabileceğini düşünmüyorum (ya da olabilmeli).

— graphicdivine
kaynak

0

Dış div içinde (yeşil kutu) gösterilmeyen başka bir içerik varsa, neden bu içerik başka bir div içine sarılmıyorsa, diyelim "content". Taşmayı bu yeni iç div'de gizleyin, ancak taşmayı yeşil kutuda görünür tutun.

Tek yakalama, daha sonra içerik divının kırmızı kutunun konumlandırmasına müdahale etmediğinden emin olmak için uğraşmanız gerekecek, ancak bunu küçük baş ağrısıyla düzeltebilmeniz gerektiği gibi geliyor.

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

— Anthony
kaynak