显示隐藏的子div而不更改父div的大小
[英]show hidden child div without changing the size of parent div
问题描述
I have the following code: 
我有以下代码：
function show() { document.getElementById("child").style.display = "block"; }
#parent { background-color: orange; padding: 2em; } #child { background-color: pink; padding: 3em; display: none; }
<div id="parent" onmouseover="show()"> <div id="child"> Child div </div> </div>
When I hover over the parent div, the size of the parent changes. 当我将鼠标悬停在父级div上时，父级的大小会更改。 Is there a way to show the child div above the parent div, without changing the size of the parent div? 有没有办法在不改变父div大小的情况下将子div显示在父div之上？
3 个解决方案
解决方案1
4 2015-05-20 17:49:50
You can use 您可以使用
visibility:hidden
in place of 代替
display:none
To show/hide the content and keep the size unchanged. 显示/隐藏内容并保持大小不变。 Need to change the script accordingly. 需要相应地更改脚本。
解决方案2
1 2015-05-20 17:49:57
You could use a relative position on your parent and an absolute position on the child elements: 您可以在父元素上使用相对位置，在子元素上使用绝对位置：
function show() { document.getElementById("child").style.display="block"; }
#parent { background-color: orange; padding:2em; position:relative; } #child { background-color: pink; padding: 3em; display: none; position: absolute; }
<html> <head> <title></title> </head> <body> <div id="parent" onmouseover="show()"> <div id="child"> Child div </div> </div> </body> </html>
解决方案3
0 2015-05-20 18:19:26
Is this what you require http://jsfiddle.net/u74m4x9o/ 这是您需要的吗http://jsfiddle.net/u74m4x9o/
<div id="parent" onmouseover="show()">
<div id="child">
Child div
</div>
</div>
function show() {
document.getElementById("child").style.display = "block";
}
#parent {
background-color: orange;
padding: 2em;
}
#child {
background-color: pink;
padding: 1em;
display: none;
position:absolute;
top : 1em
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.