我找到的唯一解决方案是在我想完全看到的元素上放置一个position: fixed
。还有其他选择吗? (我不想固定“cool-image”)。帮助或提示会很棒。另外,如果有人能解释解决方案 - 那会更好
fiddle :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;
}
最佳答案
不幸的是,你不能。当位置未设置为 fixed
或 absolute
时,子元素只能在父区域内更改。
如果你不想让 child 固定,你可以尝试position:absolute;
并将父设置为position:relative;
像这样...
.slide img {
position: absolute;
z-index: 2;
}
.slide {
position: relative;
}
或者您可以尝试只隐藏 1 个方向的溢出。比如overflow-y:hidden;
或者overflow-x:hidden;
关于html - 强制子元素在溢出之外可见 :hidden parent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44970116/