Question

因此，要使div（导航栏）停留在页面顶部，我需要固定位置。我知道这一点，并且工作正常。但是在当前的网页设计中，我正在处理此导航栏，但最终却落后于所有其他元素。现在和以前的时间之间的区别是，我使用javascript来根据用户的滚动方式来修改内容的位置。这也可以正常工作，但导航栏最终位于所有这些元素的后面。谷歌搜索后，我发现我可以使用z-index和绝对或相对位置。但是我需要一个固定的才能放在顶部。

执行此操作的好方法是什么？我需要注意什么？

我不确定这里实际上有什么用，但是..

#nav {
  position:fixed;
  top:0;
  width:100%;
  height:50px;
  z-index:999;
}

#header {
  position:absolute;
  top:0;
  left:0;
  transition: 0.6s;
}

#wrapper {
  width:100%;
  position:absolute;
  top:45%;
  left:-10px;
  transition: 0.6s;
}

Answer 1

尝试在导航栏中使用CSS：

position: fixed;
top: 0px;
left: 0px;
z-index: 999;

示例：

.navbar{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  background: #555;
  width: 100%;
}

.item {
	color: rgba(255,255,255,0.75);
	font-weight: bold;
	list-style-type: none;
	margin-right: 5px;
	float:left;
  padding: 10px;
  background: #555;
  cursor: pointer;
} .item:hover {
	color: rgba(255,255,255,1);
  background: #999;
}

.page{
  position: absolute;
  top: 40px;
  left 0px;
}

<div>
  <div class='navbar'>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
  <div class='page'>
  Some long text.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer 2

使用z-index放置导航栏。除非获得所需的结果，否则您可以通过在浏览器中更改z-index值来尝试此设置。尝试使用css而不是脚本来强制执行z-index（以防您使用脚本尝试执行此操作）。

将div置于页面问题之上

2 个答案: