如何將一個div覆蓋另一個？

Question

當我將鼠標懸停在id為1的div上時，會出現對話框，但是id為3的div向右移動。

我希望對話框在ID為3的div上出現而不會向右移動。

HTML頁面

<!DOCTYPE html>
<html>
<head>
<style>
div{
width:300px;
height:300px;
border:1px solid #000000;
float:left;
margin-left:10px;
}
#one,#three{
position:relative;
}
#two,#four{
margin:0;
padding:0;
left:334px;
top:100px;
background-color:#3B3B3B;
border:none;
width:200px;
height:100px;
display:none;
position:relative;
left:14px;
}
#triangleone,#triangletwo{
margin:0;
padding:0;
width: 0;
height: 0;
border-color:transparent;
border-top: 8px solid transparent;
border-right: 14px solid #3B3B3B;
border-bottom: 8px solid transparent;
top:35px;
display:none;
position:relative;

}
#dialogboxone,#dialogboxtwo{
margin:0;
padding:0;
width:214px;
display:none;
border:none;
}
</style>
<script>
var timer;
function showDialogBox(idOne,idTwo,idThree){
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
timer=setTimeout(function(){
firstSideBar.style.display="block";
secondSideBar.style.display="block";
dialogBox.style.display="block";
},800);
}
function hideDialogBox(idOne,idTwo,idThree){
clearTimeout(timer);
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
firstSideBar.style.display="none";
secondSideBar.style.display="none";
dialogBox.style.display="none";
}
</script>
</head>
<body>
<div id="one" onmouseover="showDialogBox('two','triangleone','dialogboxone')" onmouseout=hideDialogBox('two','triangleone','dialogboxone')></div>
<div id="dialogboxone">
<div id="two"></div>
<div id="triangleone"></div>
</div>
<div id="three" onmouseover="showDialogBox('four','triangletwo','dialogboxtwo')" onmouseout="hideDialogBox('four','triangletwo','dialogboxtwo')"></div>
<div id="dialogboxtwo">
<div id="four"></div>
<div id="triangletwo"></div>
</div>
</body>
</html>

Answer 1

您需要使用包裝器將對話框置於以下位置：

<div class="wrapper">
    <div id="one"></div>

    <div id="dialogone"></div>
</div>

然后，您需要相對定位包裝器，並根據自己的喜好定位包裝器（例如，使用float ）。 對話框可以絕對定位，例如： position: absolute; left: 100% position: absolute; left: 100%將它們position: absolute; left: 100%在包裝的右側。

JSFiddle示例

注意：請嘗試使用縮進和空格來使代碼的格式更具可讀性...當您編寫英語時也使用空格，對嗎？

如何將一個div覆蓋另一個？

問題描述

1 個解決方案

解決方案1
0 已采納 2014-11-11 17:26:23

如何將一個div覆蓋另一個？

問題描述

1 個解決方案

解決方案1 0 已采納 2014-11-11 17:26:23

解決方案1
0 已采納 2014-11-11 17:26:23