Html 覆盖溢出：用 z-index 隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1952344/
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
override overflow:hidden with z-index
提问by mukamaivan
Am using coda_bubble jquery plugin, and i need to make my bubble pop out within an overflow hidden div. here is my sample code.
我正在使用 coda_bubble jquery 插件，我需要让我的气泡在溢出隐藏的 div 中弹出。这是我的示例代码。
<html>
<head>
<title>Override overflow:hidden</title>
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>
<script type="text/javascript">
$(function(){
opts = {
distances : [40,40],
leftShifts : [0,0],
bubbleTimes : [400,400],
hideDelays : [0,0],
bubbleWidths : [200,200],
bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER",
msieFix : true
};
$('.coda_bubble').codaBubble(opts);
});
</script>
<style type="text/css">
body{
margin:0;
padding:0;
}
#wrapper{
width:300px;
margin:200px auto;
}
.overflow{
width:120px;
height:80px;
overflow:hidden;
float:left;
}
.coda_bubble{
z-index:100;/****NOT WORKING*******/
}
</style>
</head>
<body>
<div id="wrapper">
<div class="overflow">
<div class="coda_bubble">
<div>
<p class="trigger">Trigger Bubble</p>
</div>
<div class="bubble_html">
[BUBBLE CONTENT]
</div>
</div>
</div>
<div class="overflow" style="overflow: visible;">
<div class="coda_bubble">
<div>
<p class="trigger">Trigger Bubble</p>
</div>
<div class="bubble_html">
[BUBBLE CONTENT]
</div>
</div>
</div>
</div>
</body>
</html>
采纳答案by Byran Zaugg
I assume you don't need .coda_bubble to be a child of .overflow. If not then move it out and create a positioning div to hold both children.
我假设你不需要 .coda_bubble 成为 .overflow 的孩子。如果没有，则将其移出并创建一个定位 div 来容纳两个孩子。
<html>
<head>
<title>Override overflow:hidden</title>
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>
<script type="text/javascript">
$(function(){
opts = {
distances : [40,40],
leftShifts : [0,0],
bubbleTimes : [400,400],
hideDelays : [0,0],
bubbleWidths : [200,200],
bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER",
msieFix : true
};
$('.coda_bubble').codaBubble(opts);
});
</script>
<style type="text/css">
body{
margin:0;
padding:0;
}
#wrapper{
width:300px;
margin:200px auto;
}
.overflow{
overflow:hidden;
width:120px;
height:80px;
position:absolute; /*May not be needed.*/
}
.position {
width:120px;
height:80px;
float:left;
}
.coda_bubble{
/*z-index:100;/****NOT WORKING*******/
}
</style>
</head>
<body>
<div id="wrapper">
<div class="position">
<div class="overflow">
[overflow content]
</div>
<div class="coda_bubble">
<div>
<p class="trigger">Trigger Bubble</p>
</div>
<div class="bubble_html">
[BUBBLE CONTENT]
</div>
</div>
</div>
<div class="position">
<div class="overflow" style="overflow:">
[overflow content]
</div>
<div class="coda_bubble">
<div>
<p class="trigger">Trigger Bubble</p>
</div>
<div class="bubble_html">
[BUBBLE CONTENT]
</div>
</div>
</div>
</div>
</body>
</html>
回答by Tom Hamshere
I would calculate the offset position from the window, remove it from its parent and attach it to the body.
我会计算窗口的偏移位置，将其从其父项中移除并将其附加到主体上。
Eg:
例如：
var left, top;
left = jQuery(element).offset().left;
top = jQuery(element).offset().top;
jQuery(element)
.appendTo('body')
.css({
'position': 'absolute',
'left': left + 'px',
'top': top + 'px'
});
回答by George Sisco
You can't. overflow: hidden; Hides content outside the element. Period.
你不能。溢出：隐藏；隐藏元素外的内容。时期。
z-index applies to absolute AND relatively positioned elements, just differently, despite what someone else said.
z-index 适用于绝对和相对定位的元素，只是不同，不管别人怎么说。
EDITYou could put some padding-top on that particular div, if you can live with that padding, that is. The div would need to be a little wider, too.
编辑你可以在那个特定的 div 上放一些 padding-top，如果你能忍受那个 padding，那就是。div 也需要更宽一些。
EDIT 2As others have stated, though position: relative; and position: absolute; are probably more common, yes, z-index works with position: fixed; also, just not for position: static; I overlooked those.
编辑 2正如其他人所说，虽然位置：相对；和位置：绝对；可能更常见，是的，z-index 适用于 position: fixed; 另外，只是不用于位置：静态；我忽略了那些。
回答by mystrdat
Just a correction: z-indexapplies to position: relative, position:absoluteAND position:fixed.
To answer the original question - there's no way in CSS to make a child of an overflow: hiddenelement show it's contents outside the parent borders, you must change the hierarchy.
只是更正：z-index适用于position: relative, position:absoluteAND position:fixed。要回答最初的问题 - 在 CSS 中没有办法让overflow: hidden元素的子元素在父边框之外显示它的内容，您必须更改层次结构。
回答by Username
The z-indexproperty ONLYwork in elements that have positionoption set to absoluteor relative.
该z-index属性仅适用于position选项设置为absoluteor 的元素relative。
In other words you ALWAYSneed positonto work with z-index.
换句话说，您总是需要positon使用z-index.
回答by Sarfraz
The z-index property applies to those elements having position set to absolute. Try this css instead:
z-index 属性适用于那些位置设置为绝对的元素。试试这个 css：
.coda_bubble{
position:absolute;
z-index:100;/****NOT WORKING*******/
}
