html - 如何创建固定元素

Question

正如您在图片中看到的，我怎样才能使菜单选项卡固定一个？

我尝试将 div 定位属性更改为fixed，但问题是它覆盖在我的图片上。实际上，单击时菜单部分会进入屏幕tab1。

我想让菜单部分固定，并在单击菜单内容时，即：菜单 1,2,3，右侧内容部分应该改变。

我已经在这里上传了我的文件：链接。

Answer 1

Use

position: fixed
bottom: 54px; //Change to what you want
width: 100%; //Change to what you want

Answer 2

对不起我之前的回答，你有两个解决方案：

使用 CSS：

您可以手动将 amargin-bottom设置为该.navigator部分，以使内容完全位于该部分之下，但这不是一个好的解决方案，除非该部分不会随时更改高度。

使用jQuery：

您可以将height值赋予.navigator使用：

$(".navigator").css({ height: $(".size").height() });

Answer 3

这很简单。当您position:fixed从文档流中删除元素时，这就是它位于图像顶部的原因。

例如，您还需要定位它

.your-element{
position:fixed;
top:0; /* Positions top of your div to top of browser window*/
left:0; /*positions left of your div to left of the browser window*/
}

上面的代码将始终在窗口的左上角为您提供一个固定菜单。您可以随意调整边距以将其准确地放在您想要的位置。