切换div容器与它下面的另一个容器重叠 [英] Toggle div container overlapping another container under it

问题描述

我的网站表单页面上有3个div.每当我单击切换按钮时，左上方的切换就会与底部div重叠.

I have 3 divs on a form page of my website. The top left toggle overlaps the bottom div whenever i click the toggle button.

我想做的是单击顶部div容器时，左下div容器应向下移动，并在关闭切换开关时移回其原来的位置.

What I'm trying to do is that the bottom left div container should move down when the top div container is clicked and move back to it's former position when toggle is closed.

我已经为正确的div添加了css，但我不知道那是否是css影响着旁边的两个div的位置.

I have included the css for the right div, I dont know if that is the css afecting the positions of the two div 's beside it.

切换前

切换后

Toggle的CSS

#toggle-view {
list-style:none;    
font-family:arial;
font-size:10px;
margin:0;
padding:0;
width:200px; 
position: absolute;
}

#toggle-view li {
    list-style:none;
    text-decoration:none;
    font-size:13px;
    font-family:'lato';
    padding:2px;
    margin:10px;
    margin-left:20px;
    position:relative;
    cursor:pointer; 
    border-radius: 5px;    
}

 #toggle-view li a:hover {
    color: brown;  
}

#toggle-view h3 {
    margin:0;
    font-size:13px;
    color:#2a5a9a;
}

#toggle-view span {
    position:absolute;
    right:5px; top:0;
    color:#2a5a9a;
    font-size:20px;
    font-weight: bolder;
}

#toggle-view p {
    margin:5px 0;
    display:none;
}

#toggle-view a{
    padding:5px 0;
    color:#35371c; 
}

#toggle-view a:hover{

     color:#2a5a9a;
}

LeftBox的CSS

.report{
position: absolute;
margin-top:100px;
margin-left:0;
padding-left: 20px;
}

右框CSS

.register-body {
height:auto;
font-size:1em;
width:710px;
position:relative;
color:#000;
border-radius:5px;
background-color:#d2d4bb;
line-height:20px;         
margin:20px 0 20px 250px;
padding:15px 15px 0; 
}

更新

当我更改

#toggle-view {
position: absolute;
}

到

#toggle-view {
position: relative;
}

和

.report{
 position: absolute;
}

到

.report{
 position: relative;
 }

我知道了:

右框被推到左下方框的下方.

The Right Box is pushed below the bottom left box.

推荐答案

这是因为您使用的是绝对位置.尝试在没有绝对定位的情况下进行布局，然后布局会根据您的全能意愿移动，弯曲和弯曲！ :)

It's because you're using position absolute. Try doing the layout without absolute positioning and then it will move and flex and bend to your almighty will! :)

这篇关于切换div容器与它下面的另一个容器重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！