是否可以将 position relative 和 fixed 组合在同一个元素上？

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

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

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

Answer 2

将所有元素放在 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 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>

是否可以将 position relative 和 fixed 组合在同一个元素上？

Is it possible to combine position relative and fixed on the same element?

css

css-position

navbar