CSS Overflow:auto 隐藏绝对定位的超出父元素大小的子元素

Question

我有一个 DIV 将是页面的宽度，但内容可能太宽而放不下。我已经为它设置了 overflow-x:auto 以便内容可以滚动。我的问题是，我想让每个子 div 展开并在您将鼠标悬停在它们上面时可见，但如果它们超过父 div.

，它们目前会被剪裁

HTML:

    <div class='Content'>
<div class='ImageContainer'>
    <div class='Image'>Container 1</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 2</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 3</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 4</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 5</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 6</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 7</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 8</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 9</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 10</div>
</div>

CSS

.Content {
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
}
.ImageContainer {
    position:relative;
    width:100px;
    height:150px;
    display:inline-block;
}
.Image {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:1;
    border:1px solid black;
    background-color:#AAA;
}
.Image:hover {
    left:-10px;
    top:-10px;
    right:-10px;
    bottom:-10px;
    z-index:2;
}

填充 "content" div 是一种解决方法，但并没有真正解决我的问题。那里有 CSS 大师可以浪费几秒钟吗？我知道这可能很容易修复。谢谢！

Answer 1

尝试从“.Content”中删除 "overflow" 属性并将其包装在另一个 class 中。示例：

<div class='MainContainer'>
<div class='Content'>
    <div class='ImageContainer'>
        <div class='Image'>Container 1</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 2</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 3</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 4</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 5</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 6</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 7</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 8</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 9</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 10</div>
    </div>
</div>
    </div>

现在我已将您的内容包装在 MainContainer 中以进行样式设置：

.MainContainer{
    width:100%;
    height:220px;
    overflow-x:scroll;
    overflow-y:hidden;
}

.Content {
    margin:30px 0px;
    white-space:nowrap;
position:relative;
}

在此处查看结果： https://jsfiddle.net/Lepp23z0/1/

Answer 2

通过完全消除滚动条，我能够使图像容器超出父容器 div。

这并不理想，但除了 this:

之外，我无法在这里找到解决方案

.Content {
    text-align:center;
    margin:15px;
    border:1px solid black;
}
.ImageContainer {
    position:relative;
    width:80px;
    height:150px;
    display:inline-block;
}
.Image {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:1;
    border:1px solid black;
    background-color:#AAA;
}
.Image:hover {
    left:-15px;
    top:-15px;
    right:-15px;
    bottom:-15px;
    z-index:2;
}

CSS Overflow:auto 隐藏绝对定位的超出父元素大小的子元素

CSS Overflow:auto hiding absolutely positioned child elements that exceed parent size

html

css

css-position

overflow