Toggle div container overlapping another container under it

问题

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.

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.

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.

Before Toggle

After Toggle

CSS for Toggle

#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;
}

CSS for LeftBox

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

CSS for Right Box

.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; 
}

UPDATE

When I changed

#toggle-view {
position: absolute;
}

#toggle-view {
position: relative;
}

and

.report{
 position: absolute;
}

.report{
 position: relative;
 }

I got this :

The Right Box is pushed below the bottom left box.

回答1:

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! :)

来源：https://stackoverflow.com/questions/12415193/toggle-div-container-overlapping-another-container-under-it

标签

css

html

position

containers