強制子元素在溢出區域之外可見：隱藏父區

我發現的唯一解決方案是將position: fixed放在我想完全看到的元素上。任何其他選項？（我不想'酷圖像'固定）。幫助或提示會很棒。此外，如果任何人都可以解釋的解決方案 - 這將是更好的強制子元素在溢出區域之外可見：隱藏父區

小提琴：JSFiddle

HTML

<div class="img-cont"> 
    <div id="slider"> 
    <ul> 
     <li class="slide"> 
     <img src="http://www.sportspearl.com/wp-content/uploads/2017/05/football-150x150.png" > 
     <div class="cool-image"></div> 
     </li> 
    </ul> 
    </div> 
</div>

CSS

.img-cont{ 
    height: 270px; 
    position: relative; 
} 
#slider { 
    position: relative; 
    background: green; 
    overflow: hidden; 
    width: 440px; 
    height: 200px; 
} 
#slider ul{ 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
#slider ul li { 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 440px; 
    height: 270px; 
    text-align: center; 
    line-height: 300px; 
} 
div.cool-image{ 
    background-color: white; 
    position: absolute; 
    border: 5px solid #EEEEEE; 
    width: 650px; 
    height: 350px; 
    z-index: 1; 
    display: inline-block; 
    background-repeat: no-repeat; 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Basketball.png/170px-Basketball.png); 
    margin-left: -40px; /* Just to product situation */ 

    display: inline-block; 
}

來源

2017-07-07 PeterPakla

你能解釋一下你想要的結果嗎？ –

@JeffHechler div.cool-image部分隱藏，因爲父值溢出：隱藏。有沒有辦法改變一些CSS規則，所以，div.cool-image完全顯示。（您可以檢查並看到，該酷圖像僅顯示爲父圖像的大小，即使父圖像溢出，我也希望完整顯示冷圖像：隱藏） – PeterPakla

不幸的是，你不能。當位置未設置爲fixed或absolute時，子元素只能在父母區域內更改。

如果你不想讓孩子固定的，你可以嘗試position:absolute;並設置父position: relative;

就像這個...

.slide img { 
    position: absolute; 
    z-index: 2; 
} 
.slide { 
    position: relative; 
}

或者你可以嘗試只隱藏1方向溢出。像overflow-y:hidden;或overflow-x: hidden;

來源

2017-07-07 12:18:10

我的建議但未成功。你能編輯我的小提琴嗎？我對第一種方法感興趣。 – PeterPakla

查看更新的答案。 –

感謝單向溢出'overflow-x-y'就是這樣！ –

強制子元素在溢出區域之外可見：隱藏父區

回答

相關問題