固定元素在中心内容之外

Question

我正在设计一个带有一个切换菜单图标的网页，用于导航。

我的问题是，只要在主容器的宽度（.story，只定义了最大宽度）下调整窗口大小，菜单图标就会重叠内容。

相反，我希望图标能够阻挡我容器的右边框。

目前，我的导航图标的位置代码：

nav {
    position: fixed;
    top: 100px;
    right: 100px;
}

和容器：

.story {
    padding-top: 50px;
    margin: 0 auto;
    height: 1000px;
    max-width: 1000px;
    text-align: justify;
}

这是一个jsfiddle来说明我的问题。 这是一个website的例子，他们让它发挥作用

感谢你看一下。

Answer 1

根据我的理解， position：fixed 将重叠数据。

一种简单的方法可以减少故事 div的宽度。

nav css

  

nav {position：fixed; 顶部：20px;右：20px; }

故事css

  

.story {        填充：50px 0;        保证金：0自动;        身高：1000px;        最大宽度：400px;        text-align：justify;}