溢出只是一个元件中DIV
有没有一种方法,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;
}
我需要的图像,虽然自然溢出。
,应该删除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>
这是一个答案...怎么样?删除位置:相对会破坏OP的滑块。 – 2012-04-17 14:21:59
@MarcB你可能没有读过我的答案的扩展版本。 – kapa 2012-04-17 14:24:20
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
});
注:
- 这并不需要填充/利润率/边境进入的影响,但可以使用的基本逻辑。
- 设置文本宽度等于容器宽度只给它的溢出应用(你也可以只设置文本的div的宽度500像素)的外观
与宣布的z-index在CSS中,您可以使用绝对位置来执行此操作。
.container{
z-index:900;
overflow:hidden;
width: 500px;
height: 250px;
}
.container img{
z-index:920;
position:absolute;
}
如果图像的位置不正确,您可以设置图像边距;
此策略只适用于某些浏览器;) – DrewT 2015-05-01 20:48:48
我想,除非你改变你的标记的东西是不可能的。设置一个小提琴,显示所需的效果。 – fcalderan 2012-04-17 14:20:20
你可以使用JavaScript来设置容器的宽度等于图像的宽度? – vol7ron 2012-04-17 14:20:26
不可能。 CSS没有“溢出:隐藏,除了img”。你必须修改标记并添加额外的容器。 – 2012-04-17 14:21:40