Question

我正在开发一个可在移动设备和桌面设备上运行的响应式网站。该网站有一个左手菜单。在桌面模式下，我总是希望这个可见，在移动设备中我希望它默认隐藏，但有一个按钮可以打开它。我实际上有2个div。一个用于固定的左手菜单，另一个用于我想要相对的剩余内容，当左手菜单不可见时我希望它移动到页面左侧的左侧。

#sidebar-wrapper {
    position: fixed;
    left: 0;
    width: 60%;
    height: 100%;

    max-width: 200px;    
  }

  #page-content-wrapper {
    position:relative;
    left: 0;
  }

我遇到的问题是页面内容div总是在左侧菜单后面。我不会相对于它定位。我可以将左侧设置为200px但是这意味着当左侧菜单不可见时，当我希望它移动到左侧时，主div仍然从左侧开始200px。

Fiddle

Answer 1

相对定位与其他元素无关，它与元素在页面上流动的位置有关。如果你希望你的绿色div总是以相同的方式定位在你的红色div旁边，你应该使用js或将你的绿色div放在你的红色div中，并且绝对100％位于包含div的左侧。我还更改了你的代码，以便你的红色div从屏幕向左移动，否则它会隐藏它所包含的所有内容。

$("#toggle").click(function (){                       
    if($("#sidebar-wrapper").css('left') == "0px"){
        $("#sidebar-wrapper").animate({left: "-200px"}, 1000);      
    }
    else{
        $("#sidebar-wrapper").animate({left: "0px"}, 1000);   
    }
});

jsfiddle

CSS - 固定Div旁边的相对Div

1 个答案: