html - 当隐藏第二个 div 的溢出时，div 的一部分在另一个 div 上

Question

我有一个 div，我想将它的一部分放在另一个 div 上。它应该如下所示:

图片 1

我已经设法想出下面的代码，如果我从 div imageSlider 中删除 overflow:hidden; 就可以正常工作，但如果我不这样做给我以下结果:

图 2

您可以在这里查看代码:http://jsfiddle.net/Y52fu/

但我必须使用 overflow:hidden; 作为 div imageSlider 的 CSS 规则，因为它实际上是图像 slider 的 div。如果不使用它，则图像 slider 将失去其功能。

你能告诉我如何实现如图 1 所示的结果，同时保持 overflow:hidden; 为 div imageSlider 吗？

HTML

<div class="imageSlider">
    <div class="box">
        <div class="slideCaption1">
            <div class="slideText1"><span>PARIS</span></div>        
        </div>
    </div>  
</div>

CSS

.imageSlider{    
    width:400px;
    overflow:hidden;    
}

.box{
    width:400px;
    height:300px;
    background-color:green;
    position:relative
}

.slideCaption1 {    
    top: 20px;
    right:-12px;
    position: absolute; 
    background: rgb(000, 000, 000); 
    background: rgba(000, 000, 000, 0.75);
}

.slideText1{
    color: white;   
    font-size:22px;
    line-height:35px;
    padding-left: 9px;
    padding-right: 9px;
    padding-top: 5px;
    padding-bottom: 5px;    
    font-weight:bold;
    margin-right:15%;
    margin-left:9%;
    text-transform:uppercase;   
 }

更新

请检查此链接以查看我元素中的实际代码:http://jsfiddle.net/P7mdV/1/

Answer 1

您可以简单地将 .box 位置属性从 relative 更改为 absolute，它应该可以工作。