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