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

Question

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

图1

我已设法提出以下代码，如果我从div overflow:hidden;中删除imageSlider，该工作正常，但如果我不这样做，则会给我以下结果：

图2

您可以在此处查看代码：http://jsfiddle.net/Y52fu/

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

请告诉我如何实现图片1中显示的结果，保留div overflow:hidden;的{​​{1}}？

HTML

imageSlider

CSS

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

更新

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

Answer 1

您可以简单地将.box位置属性从相对更改为绝对属性，它应该可以正常工作。

Answer 2

您可以使用clearfix来保留布局。从主div中删除'overflow：hidden'并添加clearfix类。然后添加到你的CSS：

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

在这里看到我的小提琴： http://jsfiddle.net/Y52fu/1/

编辑：使用新的示例，它使用了更复杂的布局和引导样式，因此同样的修复将不适用。由于旋转木马内部需要将内容隐藏在宽度集之外，所以我必须稍微玩一下，看起来像添加填充效果，如果它设置为与右偏移相同。唯一的问题是文本在滑动到位后会跳跃一点。

.carousel {
    width: 400px;
} 
.carousel-inner {
    padding-right: 12px;
}

我在图像上设置了一个明确的宽度，因为如果不这样做，它们会跳跃一下（因为当它们滑入视图并且填充到位时，宽度的100％会发生变化）。你可以在这里看到它： http://jsfiddle.net/P7mdV/3/

Answer 3

试试这个 HTML代码：我将slideCaption1放在imageSlider

之外

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

<div class="imageSlider">
    <div class="box">

    </div>
  </div>  

CSS：

position: absolute;
z-index: 9;
right: 119px;
top: 20px;

从此代码中，您不必从div imageSlider中删除overflow：hidden属性。