即使父级隐藏了溢出，也显示溢出答案

【问题标题】：Show overflow even if parent has overflow hidden即使父级隐藏了溢出，也显示溢出
【发布时间】：2013-10-08 03:44:08
【问题描述】：

我正在为图像设计一个滑块以及所述图像的标题。我想做的是让标题脱离图像的界限。

所以我所做的是我为整个事情创建了一个包装器。包装器 div 位于页面中心，position: relative;margin: 0 auto; 宽度为 500 像素，隐藏溢出。

里面是双倍宽度的图像包装。图像包装器内部是两个 div，每个 div 都有一个标题。它们的宽度各为 500，它们的位置一个挨着另一个，float:left 里面的标题有一个'margin-left：-10px;'和绝对位置和overflow: visible; 我想要的是标题溢出包装器之外的那10个像素。

有没有我可以做到这一点？

这是一个示例代码

HTML：

<div id="wrap">
<div id="imgwrap">
    <div id="imgbox" class="firstimg">
        <div id="imgtitle">
             <h3>Title here</h3>

        </div>
    </div>
    <div id="imgbox" class="secondimg">
        <div id="imgtitle">
             <h3>Title here</h3>

        </div>
    </div>
</div>
</div>

JS：

jQuery(document).ready(function ($) {
$("#imgwrap").mouseleave(function () {
    $(this).find('#imgbox').stop().css('marginLeft', '0');
    $(".secondimg").find('#imgtitle').stop().css('marginLeft', '0');
}).mouseenter(function () {
    $(this).find('#imgbox').animate({
        marginLeft: '-500px',
    }, 1000);
    $(".secondimg").find('#imgtitle').animate({
        marginLeft: '-10px',
    }, 1000);
});
});

CSS：

#wrap {
width: 500px;
position: relative;
margin: 0 auto;
overflow:hidden;
}
#imgwrap {
overflow:hidden;
background: red;
height: 500px;
width:200%;
position: relative;
}
#imgbox {
float:left;
height: 250px;
width: 500px;
overflow: visible;
position:relative;
top:20%
}
.firstimg {
background: blue;
}
.secondimg {
background: green;
}
#imgtitle {
background: black;
width: auto;
position: absolute;
overflow: visible;
bottom:0;
}
.firstimg #imgtitle {
margin-left: -10px;
}

h3 {
font-size:20pt;
line-height: 0em;    
color:white;
padding: 0 80px 0px 10px;
}

Link to Fiddle

【问题讨论】：

“标题溢出包装器外的 10 个像素”是什么意思
与您的问题无关，但您得到的是 id 和 class 属性，相反。也许this article 可以帮助你。
@VinayPandey 如果你注意到标题有margin-left: -10px;
@Sunyatasattva 是的，我仍在寻找解决 CSS 的方法。谢谢你，我会做一些阅读

标签： jquery html css

【解决方案1】：

在你的#wrap 中添加padding-left:10px。

从您的#imgWrap 中删除overflow:hidden

在您的 javascript 中，编辑此部分

$(this).find('#imgbox').animate({
        marginLeft: '**-510px**',
    }, 1000);

这是 JFiddle：http://jsfiddle.net/k3cPK/7/

【讨论】：

【解决方案2】：

div.imgtitle 将增长以适应内容，因为您拥有width:auto。显式设置width:150px 并设置white-space:nowrap，它应该会溢出

【讨论】：