将顶部导航栏的位置设置为相对时固定顶部导航栏答案

【问题标题】：Making top navigation bar fixed when its position is set as relative将顶部导航栏的位置设置为相对时固定顶部导航栏
【发布时间】：2020-10-03 05:27:44
【问题描述】：

如何使这个顶部导航栏固定在顶部？

我了解通常情况下，您会将position: fixed 应用于boxA，但在这种情况下这不起作用，因为它的位置必须设置为相对位置。整个顶部导航栏都是粘性的，所以当人们向下滚动时它会停留在页面上

.boxA:after {
  content:"";
  display: block;
  clear: both;
}

.boxA {
  height: 90px;
  position: relative;
  border-bottom: 1px solid #E0DCDC;
}

.boxA img {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0, -50%);
}

.box2 ul {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 10px;
}


.box1 {
  float: left;
   width: auto;
}

.box2 {
  float: right;
  width: auto; 
}



.box2 ul {
  margin: 0;
  padding: 0;
  list-style: none;  
}


.box2 li a {
  display: block;
  padding: 0px 50px;
  color: inherit;
  text-decoration: none; 
  font-size: 12px;
}

.box2 li a:hover {
  text-decoration: underline;
}

.box2 ul:after {
  content: "";
  display: block;
  clear: both;
}

.box2 li {
  float: left;
  width: auto;
  font-family: 'Gotham';
  letter-spacing: 2.5px;
}


.box1 img {
  position: absolute;
  height: 20px;

}

<div class="boxA">


  <div class="box1">
    <div class="site">
      <a href=""><img src="https://via.placeholder.com/140x100"></a>
    </div> 
  </div>

  <div class="box2">
    <nav class="menu"> 
      <ul>
          <li><a href="#conD">menu1</a></li>
          <li><a href="#conG">menu2</a></li>
          <li><a href="#conH">menu3</a></li>
          <li><a href="#conI">menu4</a></li>    
      </ul>
    </nav>
  </div>

</div>

我尝试在div class="boxA" 正上方添加div class="top-nav"，并将.top nav 的位置指定为固定，但这不起作用。

【问题讨论】：

标签： html css

【解决方案1】：

增加身体的高度以便更好地理解。将 position fixed 和 top 0 and width 100% 添加到你的 boxA 类

body {
  height: 900px;
}
.boxA:after {
  content:"";
  display: block;
  clear: both;
}

.boxA {
  height: 90px;
  position: fixed;
  border-bottom: 1px solid #E0DCDC;
  top: 0;
  width: 100%;
  background: #fff;
    -webkit-box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08);
    box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08);
}

.body_part {
  margin-top: 100px;
}

.boxA img {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0, -50%);
}

.box2 ul {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 10px;
}


.box1 {
  float: left;
   width: auto;
}

.box2 {
  float: right;
  width: auto; 
}



.box2 ul {
  margin: 0;
  padding: 0;
  list-style: none;  
}


.box2 li a {
  display: block;
  padding: 0px 50px;
  color: inherit;
  text-decoration: none; 
  font-size: 12px;
}

.box2 li a:hover {
  text-decoration: underline;
}

.box2 ul:after {
  content: "";
  display: block;
  clear: both;
}

.box2 li {
  float: left;
  width: auto;
  font-family: 'Gotham';
  letter-spacing: 2.5px;
}


.box1 img {
  position: absolute;
  height: 20px;

}

<body>
  <div class="boxA">


    <div class="box1">
      <div class="site">
        <a href=""><img src="https://via.placeholder.com/140x100"></a>
      </div> 
    </div>

    <div class="box2">
      <nav class="menu"> 
        <ul>
            <li><a href="#conD">menu1</a></li>
            <li><a href="#conG">menu2</a></li>
            <li><a href="#conH">menu3</a></li>
            <li><a href="#conI">menu4</a></li>    
        </ul>
      </nav>
    </div>

  </div>
  
  <div class="body_part">
    <img src = "https://via.placeholder.com/350x150">
  </div>
</body>

【讨论】：

感谢您的成功！当我向下滚动时，我注意到虽然顶部导航栏正确固定在顶部，但有时它被放置在某些元素下方 - 我该如何解决这个问题？
检查我编辑的答案，尝试添加背景和框阴影，这可能会帮助你
谢谢。我确实尝试过，但顶部导航栏仍然出现在某些元素下方！这可能是什么原因造成的？
您必须创建一个名为 body_part 的类，并且在 body_part 中将包含所有其他内容
您好，谢谢。我将其他所有内容都包装在 div=body_part 中，但我仍然遇到问题......我还能在这里尝试什么？非常感谢