javascript - 防止#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-search-cart 上设置 position: relative，然后在特定的 .login、.search、.cart 上设置 position: absolute，如下所示:

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

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

那些绝对定位的元素不会影响页面的其余部分，因为它们已脱离流程。