2013-01-18 15 views
22

Biri diğerinin içine yerleştirilmiş 2 div var. Sayfa tasarımına göre, iç içe geçmiş div, this image'da olduğu gibi ana divun "üstünde" görünmesi gerekiyor.CSS: ana öğe öğesinin sınırlarının biraz dışında konumlandırılmış öğe

İstenen etkiyi taklit etmeye çalışmak için iç içe geçmiş div üzerinde negatif bir üst kenar boşluğu kullanarak her iki öğe için kodlanmış CSS var. Ancak, ebeveynin sınırlarının dışında görünmek yerine, iç içe geçen divun en iyi 10px'i ya da this image'da olduğu gibi kesiliyor.

Öğeyi kesinlikle konumlandırmak istemiyorum, çünkü bu sayfanın hedefi yanıt vermesidir. div için

HTML: div için

<div class="container-div"> 
    <div class="child-div"> 
    ... 
    </div> 
</div> 

CSS: Sen iç içe div için position:absolute uygulamak gerekmez

.container-div { 
    padding: 10px 10px 0; 
} 

.child-div { 
    display: inline-block; 
    width: 100px; 
    height: 60px; 
    margin: -15px 10px 0; 
    border: 1px solid #efefef; 
    background-color: #fff; 
} 

cevap

28

. Bu durumda muhtemelen en iyi uygulama bu olmayacaktır.

Ve margin.

Sadece iç içe div için position:relative ekleyin ve bunu istediğiniz herhangi bir numaraya top var ayarlayın. Senin durumunda muhtemelen negatif olur.

Kontrol dışarı this Fiddle. ebeveyn üzerinde

7

overflow: hidden mükemmel şekilde yapardı!