中心内容之外的固定元素

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的宽度。

导航css

导航{位置:固定；顶部: 20px；右侧: 20px; }

故事css

.story {填充: 50px 0；边距:0自动；高度: 1000px；最大宽度: 400px;文本对齐:对齐；}