使子女身高大於父母

Question

不知道我是否想到這是完全錯誤的方式，但一些指導將非常感激。我基本上試圖讓一個孩子div比它的父母大。

請參閱圖像我想要實現

然而容器元素的高度會比較小。我是否認爲我應該將它們作爲單獨的元素，還是有更好的練習方式？

Answer 1

你可以使用position並達到你想要的。我想說的position組合，負margin會做的伎倆：

.parent {background-color: #000; height: 100px;} 
 
.parent .child {height: 200px; background-color: #ccc; width: 75%; margin: auto;} 
 

 
.parent {margin-top: 100px;} 
 
.parent .child {position: relative; top: -50%;}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

前瞻：

如果你不知道的高度的內容，您可以使用translate將其修復爲居中：

.parent {background-color: #000; width: 75%; margin: auto;} 
.parent .child {height: 200px; background-color: #fff; width: 75%; margin: auto;} 

.parent {margin-top: 100px; position: relative; min-height: 100px;} 
.parent .child {position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);} 

Answer 2

只需transform: scale(1.2);你的子元素

#parent{ 
 
    margin: 40px; 
 
    background:#000; 
 
} 
 
#child{ 
 
    background:#d8d8d8; 
 
    height:140px; 
 
    box-shadow: 0 0 40px rgba(0,0,0,0.2); 
 
    position:relative; 
 
    margin:0 auto; 
 
    width:60%; 
 
    transform:scale(1.2); -webkit-transform:scale(1.2); 
 
}

<div id="parent"> 
 
    <div id="child"></div> 
 
</div>