Html CSS固定div，带左右浮动定位

我有一个导航条，右边浮动，左边330px。在绝对位置上一切都很好，但我想要修复，问题来了。我该怎么做？我也尝试过各种方法，但它们似乎不起作用。我真的希望有一些真正简单的方法，但我想不出来。 这是我的密码 HTML

JS

编辑：这是我想做的

img{ 用户拖动：无； -moz用户选择：无； -webkit用户拖动：无； } 身体{ 溢出x：隐藏； 背景：urlhttp://i.imgur.com/z1y0hYN.png 100%0固定； } 保险商实验室{ 列表样式类型：无 } .菜单图标{ 位置：绝对位置； z指数：-1； } 导航{ 浮动：对； 左：330px； 保证金：0； 填充：0； 位置：相对位置； } .菜单\文本{ 颜色：白色； 字体大小：24px； 高度：132px； 宽度：390px； 位置：绝对位置； 左边距：80px； 边缘顶部：60像素； z指数：-2； } $document.readyfunction{ var状态=真； $.toggle-slide-button.clickfunction{ 如果{ $'nav'.stop.animate{left:330}，1000； 状态=真； } 否则{ $'nav'.stop.animate{left:20}，1000； 状态=假； } }; }; $document.readyfunction{ $.boxx.hover函数{ $this.attrsrc，http://i.imgur.com/MlmFvp3.png; }，功能{ $this.attrsrc，http://i.imgur.com/FCKVSFe.png; }; }; 家 使用position:fixed时，您可以通过添加：right:0或left:100%将导航元素定位到屏幕右侧，但不能同时添加这两个选项。由于默认情况下，您只希望导航的一小部分可见，因此可以通过设置负边距将元素“推出屏幕”，例如：

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

以下是导航设置为位置时代码的工作示例：固定：

$document.readyfunction{ var状态； $.toggle-slide-button.clickfunction{ 如果{ $'nav'.stop.animate{ “左边距”：“-330px” }, 1000; 状态=真； }否则{ $'nav'.stop.animate{ “左边距”：“-65px” }, 1000; 状态=假； } }; }; $document.readyfunction{ $.boxx.hover函数{ $this.attrsrc，http://i.imgur.com/MlmFvp3.png; }，功能{ $this.attrsrc，http://i.imgur.com/FCKVSFe.png; }; }; .只是一个假人{ 高度：2600px； } 身体{ 溢出x：隐藏； 背景：urlhttp://i.imgur.com/z1y0hYN.png 100%0固定； } 保险商实验室{ 列表样式类型：无； 保证金：0； 填充：0； } .切换滑动按钮{ 显示：块； 光标：指针； } .菜单图标{ 位置：绝对位置； z指数：-1； 显示：块； 光标：指针； } 导航{ 位置：固定； 顶部：40px； 左：100%； 利润率：0-65px； 填充：0； } .菜单\文本{ 颜色：白色； 字体大小：24px； 高度：132px； 宽度：390px； 位置：绝对位置； 左边距：80px； 边缘顶部：60像素； z指数：-2； } …只是为了让页面记录更准确！ 家

---

请向我们提供您预期结果的示例图像或详细说明。修复后，您可以设置其相对于viewscreen的位置。它不会以浮动响应您的布局。那么你想做什么呢？你能澄清这个问题吗？你说一切正常，你需要在第一句话中修正。您正在尝试将动画设置为固定位置还是绝对位置？不在屏幕中移动或不在页面中移动我以所需的效果编辑了文章。例如，我想要这个效果，但带有position:fixed on nav。

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

        $(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");
    });
});

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