javascript 仅溢出 DIV 中的一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10193007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow just one element in a DIV
提问by Lee Price
Is there a way, CSS or JavaScript to allow overflow of one element in a DIV, even if its parents overflow is hidden.
有没有办法，CSS 或 JavaScript 允许 DIV 中的一个元素溢出，即使其父溢出被隐藏。
I've written a jQuery slider that hides slides by using overflow: hidden.
我编写了一个 jQuery 滑块，它使用overflow: hidden.
<div class="container">
<img src="image.jpg" />
<div class="text">
THIS TEXT IS HIDDEN WHEN POSITIONED OUTSIDE OF .container
</div>
</div>
The CSS:
CSS：
.container{
overflow:hidden;
position: relative;
width: 500px; height: 250px;
}
I need the image to overflow naturally though.
我需要图像自然溢出。
回答by kapa
You should remove position: relative;. If you place it on the same element as overflow: hidden;, it will hide the element. If you really need it, try placing it on the parent of .container(higher in the tree than the element having overflow: hidden).
你应该删除position: relative;. 如果将其放置在与 相同的元素上overflow: hidden;，它将隐藏该元素。如果您确实需要它，请尝试将其放置在.container（在树中比具有 的元素更高）的父级上overflow: hidden。
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>回答by vol7ron
jQuery Example
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
});
Note:
笔记：
- This does not take padding/margins/borders into affect, but is the basic logic you can use.
- Setting the text width equal to the container width only gives it the appearance that the overflow is applied (you could also just set the text-div's width to 500px)
- 这不会影响填充/边距/边框，而是您可以使用的基本逻辑。
- 将文本宽度设置为等于容器宽度只会使其看起来应用了溢出（您也可以将 text-div 的宽度设置为 500px）
回答by M Rostami
with declaring z-index in css you can use position absolute to do this.
通过在 css 中声明 z-index，您可以使用绝对位置来执行此操作。
.container{
z-index:900;
overflow:hidden;
width: 500px;
height: 250px;
}
.container img{
z-index:920;
position:absolute;
}
you can set margin for image if its position is not true;
如果图像的位置不正确，您可以为图像设置边距；
回答by TLbiz
you cant set image popover with position: static
你不能设置图像弹出框 position: static
.container{
z-index:900;
overflow:hidden;
width: 500px;
height: 250px;
}
.container img{
z-index:920;
position:static;
}
