CSS 固定 div 左右浮动定位

Question

所以我的导航栏向右浮动，向左浮动 330 像素。一切都在绝对位置上工作正常，但我想要修复，问题就来了。我应该怎么做？我也尝试了各种方法，但它们似乎不起作用我真的希望有一些非常简单的方法，但我无法弄清楚。这是我的代码 HTML

<div id="nav" >
    <ul>
        <li><img class="toggle-slide-button" src="assets/images/menu/menutoggle.png" alt=""></li>
        <li><img class="Menu_icon"src="assets/images/menu/Home_icon.png" alt="">
        <div class="menu_text">Home</div>
        <img  class="boxx" src="assets/images/menu/box.png" alt="">

        </li>

    </ul>

</div>

CSS

body{
    overflow-x: hidden;
    background: url(../images/Home/Screen_1/home_final_background.png) 100% 0 fixed;
}
ul{
    list-style-type:none
}
.Menu_icon{
    position: absolute;
    z-index: -1;
}
#nav{ float: right;  z-index: 152; right: -330px; 

    margin: 0;
    padding: 0;
    text-align: initial !important;
    position: fixed;
}
.menu_text{
    color:white;
    font-size:24px;
    height: 132px;
    width: 390px;
    position: absolute;
    margin-left: 80px;
    margin-top: 60px;
    z-index: -2;
}

JS

        $(document).ready(function(){
    var state = true;

    $(".toggle-slide-button").click(function () {
        if (!state) {
            $('#nav').stop().animate({left:330}, 1000);
              state = true;
            }
        else {
              $('#nav').stop().animate({left: 20}, 1000);
              state = false;
            }
    });
    });



 $(document).ready(function(){
    $(".boxx").hover(function() {
        $(this).attr("src","assets/images/menu/box_hover.png");
            }, function() {
        $(this).attr("src","assets/images/menu/box.png");
    });
});

编辑：这是我想要做的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



 <style>
 img{
  user-drag: none; 
-moz-user-select: none;
-webkit-user-drag: none;
 }
 body{
  overflow-x: hidden;
  background: url(http://i.imgur.com/z1y0hYN.png) 100% 0 fixed; 
 }
 ul{
  list-style-type:none
 }
 .Menu_icon{
  position: absolute;
  z-index: -1;
 }
 #nav{
  float: right;
  left:330px;
  margin: 0;
        padding: 0;
        position: relative;
 }
 .menu_text{
  color:white;
  font-size:24px;
  height: 132px;
  width: 390px;
  position: absolute;
  margin-left: 80px;
  margin-top: 60px;
  z-index: -2;
 }

 </style>
  <script>
  $(document).ready(function(){
  var state = true;

  $(".toggle-slide-button").click(function () {
      if (!state) {
          $('#nav').stop().animate({left:330}, 1000);
            state = true;
          }
      else {
            $('#nav').stop().animate({left: 20}, 1000);
            state = false;
          }
  });
  });
 </script>



<script  type='text/javascript'>
$(document).ready(function(){
 $(".boxx").hover(function() {
  $(this).attr("src","http://i.imgur.com/MlmFvp3.png");
   }, function() {
  $(this).attr("src","http://i.imgur.com/FCKVSFe.png");
 });
});
</script>


















 <div id="nav">
  <ul>
   <li><img class="toggle-slide-button" src="http://i.imgur.com/WsgovYE.png" alt=""></li>
   <li><img class="Menu_icon"src="http://i.imgur.com/rYo7Utj.png" alt="">
   <div class="menu_text">Home</div>
   <img  class="boxx" src="http://i.imgur.com/FCKVSFe.png" alt="">
   
   </li>
   
  </ul>

 </div>

Answer 1

使用 position:fixed 时，您可以通过添加 right: 0 或 left: 100%（不是两者）将 #nav 元素定位到屏幕的右侧。由于默认只希望 #nav 的一小部分可见，因此可以通过设置负边距来推动元素 'out of the screen'，例如：

#nav {
    position: fixed;
    left: 100%;
    width: 400px;
    margin-right: -300px; /* (400px-300) keeps 100px of the element in sight */
}

这是您的代码的工作示例，其中 #nav 设置为 position:fixed:

$(document).ready(function() {
  var state;

  $(".toggle-slide-button").click(function() {
    if (!state) {
      $('#nav').stop().animate({
        'margin-left': '-330px'
      }, 1000);
      state = true;
    } else {
      $('#nav').stop().animate({
        'margin-left': '-65px'
      }, 1000);
      state = false;
    }
  });
});

$(document).ready(function() {
  $(".boxx").hover(function() {
    $(this).attr("src", "http://i.imgur.com/MlmFvp3.png");
  }, function() {
    $(this).attr("src", "http://i.imgur.com/FCKVSFe.png");
  });
});

.just-a-dummie-element {
  height: 2600px;
}
body {
  overflow-x: hidden;
  background: url(http://i.imgur.com/z1y0hYN.png) 100% 0 fixed;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.toggle-slide-button {
  display: block;
  cursor: pointer;
}
.Menu_icon {
  position: absolute;
  z-index: -1;
  display: block;
  cursor: pointer;
}
#nav {
  position: fixed;
  top: 40px;
  left: 100%;
  margin: 0 0 0 -65px;
  padding: 0;
}
.menu_text {
  color: white;
  font-size: 24px;
  height: 132px;
  width: 390px;
  position: absolute;
  margin-left: 80px;
  margin-top: 60px;
  z-index: -2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="just-a-dummie-element">..just to make the page loger!</div>

<div id="nav">
  <ul>
    <li>
      <img class="toggle-slide-button" src="http://i.imgur.com/WsgovYE.png" alt="" />
    </li>
    <li>
      <img class="Menu_icon" src="http://i.imgur.com/rYo7Utj.png" alt="" />
      <div class="menu_text">Home</div>
      <img class="boxx" src="http://i.imgur.com/FCKVSFe.png" alt="" />
    </li>
  </ul>
</div>

此外，只是一个简单的提示：不要使用 javascript 更改 :hover 上 .boxx 的背景，只需使用 css.

CSS 固定 div 左右浮动定位

CSS fixed div with float right and left positioning

html

css

css-float