2012-04-17 71 views
7

有没有一种方法,CSS或JavaScript允许一个元素的溢流出的DIV,即使其父母溢出是隐藏的。溢出只是一个元件中DIV

我写了一个jQuery的滑块,通过使用overflow: hidden隐藏幻灯片。

<div class="container"> 
    <img src="image.jpg" /> 
    <div class="text"> 
     THIS TEXT IS HIDDEN WHEN POSITIONED OUTSIDE OF .container 
    </div> 
</div> 

的CSS:

.container{ 
    overflow:hidden; 
    position: relative; 
    width: 500px; height: 250px; 
} 

我需要的图像,虽然自然溢出。

+0

我想,除非你改变你的标记的东西是不可能的。设置一个小提琴,显示所需的效果。 – fcalderan 2012-04-17 14:20:20

+0

你可以使用JavaScript来设置容器的宽度等于图像的宽度? – vol7ron 2012-04-17 14:20:26

+0

不可能。 CSS没有“溢出:隐藏,除了img”。你必须修改标记并添加额外的容器。 – 2012-04-17 14:21:40

回答

8

,应该删除position: relative;。如果将它放在与overflow: hidden;相同的元素上,它将隐藏该元素。如果你真的需要它,尝试(树高于其overflow: hidden元素)将它放在.container父。

jsFiddle Demo
Explanatory article

#wrap { position: relative; } 
 

 
.container{ 
 
    overflow:hidden; 
 
    width: 300px; height: 200px; 
 
    padding: 10px; 
 
    background-color: cyan; 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    top: 280px; left: 0; 
 
    border: 1px solid red; 
 
}
<div id="wrap"> 
 
    <div class="container"> 
 
    Container 
 
    <div class="text">Not hidden anymore when positioned outside of .container</div> 
 
    </div> 
 
</div>

+1

这是一个答案...怎么样?删除位置:相对会破坏OP的滑块。 – 2012-04-17 14:21:59

+0

@MarcB你可能没有读过我的答案的扩展版本。 – kapa 2012-04-17 14:24:20

0

jQuery的实施例

$('.text').each(function(){ 
    var t = $(this);     // text div 
    var c = t.closest('.container'); // container parent 
    var i = c.children('img:first'); // container image 
    t.width(c.width());    // set text width = to container width 
    c.width(i.width());    // set container width = to text width 
}); 

注:

  1. 这并不需要填充/利润率/边境进入的影响,但可以使用的基本逻辑。
  2. 设置文本宽度等于容器宽度只给它的溢出应用(你也可以只设置文本的div的宽度500像素)的外观
0

与宣布的z-index在CSS中,您可以使用绝对位置来执行此操作。

.container{ 
    z-index:900; 
    overflow:hidden; 
    width: 500px; 
    height: 250px; 
} 

.container img{ 
    z-index:920; 
    position:absolute; 
} 

如果图像的位置不正确,您可以设置图像边距;

+0

此策略只适用于某些浏览器;) – DrewT 2015-05-01 20:48:48