是否可以将相对位置和固定位置结合在同一个元素上？

Question

我正在制作一个网站导航栏，我希望它固定在顶部，这样当我向下滚动导航栏时仍然可以访问。

但是，NavBar 的位置是相对的（应该是固定的，我知道），因为我有相对于它定位的绝对元素。

如果我将位置从相对更改为固定，导航栏的外观和背景颜色会分崩离析。

你可以看到下面的代码：

CSS

#cabeçalho{
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    height: 110px;
    }
    
    header h1{
        margin: 3px;
        color: white ;
        font-size: 55px;
        font-family:  Avantgarde, TeX Gyre Adventor, URW Gothic L, Georgia, sans-serif;
    }
    
    header p{
        position: absolute;
        color: white;
        font-size: 25px;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
        transform: translate(95px , -20px);
    }
    
    ul {
        margin: 0px;
        padding: 0px;
        position : absolute;
        transform: translate(950px , -20px);
        
    }
    
    li{
        display: inline ;
        border: 1px solid white;
        font-size: 15px;
        padding: 10px;
        margin: 5px;
        color : white
    }

HTML

<div id="cabeçalho">

  <header>
    <h1>Joana Bonvalot</h1>
    <p>Artista - Pintora Clássica<p>
  </header>

  <ul>
      <li><a href="HomePage.html">Página Inicial</a></li>
      <li><a href="Galeria.html">Galeria</a></li>
      <li><a href="Encomendas.html">Encomendas</a></li>
      <li>Contactos</li>
  </ul>
</div> 

我想知道是否有任何方法可以使导航栏元素的位置固定但也是相对的，以使绝对元素保持在原位。

Answer 1

将所有元素放在navbar 标记中，并赋予其样式position: relative，以便absolute positioned 元素保留在导航中。
将nav 元素放在header 中，并将其设置为position: fixed。

header {
  position: fixed;
}

nav {
  position: relative;
}

      <header>
    <nav>
        <ul>
            <li>Example</li>
            <li>Example</li>
            <li>Example</li>
            <li>Example</li>
        </ul>
        <div class="absolute-div">

        </div>
    </nav>
</header>

Answer 2

这是一个相当简单的解决方案，当将位置从relative 更改为fixed 时，创建并设置一个等于100% 的width 样式。

#cabeçalho {
  position: fixed;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  height: 110px;
}

Answer 3

可以使用flexbox 布局。如果使用它，那么将列设置为行将很简单。然后就不需要使用absolute定位了。此外，如果我们使用 flexbox 布局，您的 unordered list 可以是响应式的。所以代码看起来像这样：

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

.container {
display: flex;
flex-direction: row;
background-color: rgba(0, 0, 0, 0.6);
height: 110px;
}

.left {
flex-basis: 50%;
}

header h1 {
margin: 3px;
color: white;
font-size: 55px;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, Georgia, sans-serif;
}

header p {
color: white;
font-size: 25px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin: 0px;
padding: 0px 0px 0px 95px;
}

.right {
flex: 1;
align-self: center;
}

li {
display: inline;
border: 1px solid white;
font-size: 15px;
padding: 10px;
margin: 5px;
color: white
}

.horizontal-list {
display: flex;
flex-flow: row wrap;
}

.list-item {
border: 1px solid white;
font-size: 15px;
padding: 10px;
margin: 5px;
color: white;
}

.order-1 {
order: 1;
}

.order-2 {
order: 2;
}

.order-3 {
order: 3;
}

.order-4 {
order: 4;
}

<div class="navbar">
<div class="container">
    <div class="left">
        <header>
          <h1>Joana Bonvalot</h1>
          <p>Artista - Pintora Clássica<p>
        </header>
    </div>

    <div  class="right">
        <div class="horizontal-list">
            <div class="list-item order-1">
               <a href="HomePage.html">Página Inicial</a>
            </div>
            <div class="list-item order-2">
                <a href="Galeria.html">Galeria</a>
            </div>
            <div class="list-item order-3">
               <a href="Encomendas.html">Encomendas</a>
            </div>
            <div class="list-item order-4">Contactos</div>
        </div>
    </div>
</div>
</div>