防止#div ul移動？

Question

通過單擊左側的圖像，會顯示一些#sidebar .classes，但是它們的顯示將#sidebar ul移到一邊。我需要停止此操作。在jfiddle中保留窗口大小，因爲代碼是全窗口導向的。

視頻例如：https://vid.me/yUwr的jsfiddle：https://jsfiddle.net/1o5mrwdq/1/

謝謝。

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway); 
body { margin-right:0 !important; margin-left:0 !important; } 
#sidebar { 
left: 0; 
background-color:#000000; 
height: 15%; 
position: fixed; 
text-align: center; 
vertical-align: middle; 
right: 0; 
top: 0; 
} 
#sidebar ul { 
display: inline-block; 
color: #BC9B1B; 
font-family: 'Raleway'; 
letter-spacing:2px; 
font-size: 20px; 
padding: 35px; 
vertical-align: middle; 
} 
#sidebar li { 
position: relative; 
float: left; 
width: 140px; 
text-align: center; 
vertical-align: middle; 
list-style: none; 
} 
#sidebar li a { 
color: #BC9B1B; 
text-decoration: none; 
display: block; 
vertical-align: middle; 
padding: 15px; 
} 
#sidebar li a:hover { 
color: #ffd700; 
} 
#sidebar li:hover{ 
color: #ffd700; 
    } 
#sidebar ul ul { 
padding: 0;    
top: 18px; 
visibility: hidden; 
} 
#sidebar ul li:hover ul { 
visibility: visible; 
} 
#sidebar ul ul li a { 
font-size: 15px; 
background-color: #3A3A3A; 
} 
#sidebar ul ul li a:hover { 
background-color: #3F3F3F; 
} 
.login-search-cart { 
margin-right: 0; 
margin-top: 3.5%; 
color: #BC9B1B; 
float: right; 
text-align: right; 
font-family: 'Raleway'; 
letter-spacing:2px; 
font-size: 18px; 
} 
.login-search-cart p{ 
display: inline 
} 
.search{ 
display: none; 
margin-top: 7%; 
margin-right: 7%; 
float: right; 
clear: both; 
} 
.login{ 
display: none; 
width: 200px; 
height: 50px; 
margin-top: 7%; 
margin-right: 15%; 
float: right; 
clear: both; 
} 
.cart{ 
display: none; 
margin-top: 7%; 
margin-right: 10%; 
float: right; 
clear: both; 
} 

HTML

<div id="sidebar"><img src="" width="260px" height="110px"> 
    &nbsp &nbsp 
    <ul> 
     <li><a href="">DONNA</a> 
     <ul> 
       <li><a href="">OCCHIALI</a></li> 
       <li><a href="">ABBIGLIAMENTO</a></li> 
      </ul> 
      </li> 
     <li> 
     <a href="">UOMO</a> 
    <ul> 
       <li><a href="">OCCHIALI</a></li> 
       <li><a href="">ABBIGLIAMENTO</a></li> 
      </ul> 
     </li> 

      <li> 
      <a href="">NEGOZI</a> 
     </li> 

     <li><a href="">CONTATTACI</a></li> 
    </ul> 
    <div class="login-search-cart"> 
    <img src="" onClick="showhide();" width="50px" height="50px"> 
    &nbsp &nbsp 
     <img src="" onClick="showhide2();" width="50px" 
     height="50px">&nbsp 
     &nbsp 
    <img src="" onClick="showhide3();" width="50px" 
     height="50px"><p>(100£)</p> 
    <div class="login">as you can see</div> 
<div class="search">hi guys</div> 

    <div class="cart">the div moves</div> 
    </div> 
</div> 

JAVASCRIPT

function showhide() 
    { 
    var div1 = document.getElementsByClassName('search')[0]; 
    var div2 = document.getElementsByClassName('login')[0]; 
    var div3 = document.getElementsByClassName('cart')[0]; 
    if (div2.style.display == "block") { 
    div2.style.display = "none"; 
    } 
    else { 
    div2.style.display = "none"; 
    } 
    if (div3.style.display == "block") { 
    div3.style.display = "none"; 
    } 
else { 
    div3.style.display = "none"; 
} 
if (div1.style.display == "block") { 
    div1.style.display = "none"; 
} 
else { 
div1.style.display = "block"; 
    } 
    } 

function showhide2() 
{ 
    var div1 = document.getElementsByClassName('search')[0]; 
    var div2 = document.getElementsByClassName('login')[0]; 
    var div3 = document.getElementsByClassName('cart')[0]; 
    if (div1.style.display == "block") { 
div1.style.display = "none"; 
} 
else { 
div1.style.display = "none"; 
    } 
if (div3.style.display == "block") { 
    div3.style.display = "none"; 
    } 
else { 
div3.style.display = "none"; 
} 
if (div2.style.display == "block") { 
div2.style.display = "none"; 
} 
else { 
    div2.style.display = "block"; 
    } 
    } 

    function showhide3() 
    { 
    var div1 = document.getElementsByClassName('search')[0]; 
    var div2 = document.getElementsByClassName('login')[0]; 
    var div3 = document.getElementsByClassName('cart')[0]; 
    if (div1.style.display == "block") { 
    div1.style.display = "none"; 
    } 
else { 
    div1.style.display = "none"; 
    } 
    if (div2.style.display == "block") { 
    div2.style.display = "none"; 
} 
else { 
    div2.style.display = "none"; 
    } 
if (div3.style.display == "block") { 
    div3.style.display = "none"; 
} 
else { 
div3.style.display = "block"; 
    } 
    } 

Answer 1

您需要設置的位置：上的.login檢索用購物車，然後相對位置：絕對特定的。登錄，。搜索，.cart像這樣：

.login-search-cart { 
    position: relative; 
    padding-bottom: 25px; 
} 

.login, 
.search, 
.cart { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 

那些絕對定位的元素不會影響頁面的其餘部分，因爲它們被取出流動。