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

如何解决是否可以将相对位置和固定位置合并在同一元素上？

我正在将Navbar制作到网站，并且希望将其固定在顶部，以便在向下滚动时仍可以导航栏。

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

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

您可以看到以下代码：

CSS

#cabeçalho{
    position: relative;
    background-color: rgba(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,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> 

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

解决方法

将所有元素放入import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Logo1aComponent } from './logo1a.component'; @NgModule({ imports: [CommonModule],declarations: [Logo1aComponent],exports: [Logo1aComponent] }) export class Logo1aModule {} 标记中，并赋予其样式navbar，以便position: relative元素保留在导航栏中。
将absolute positioned元素放在nav中，并为其设置样式header。

position: fixed

header {
  position: fixed;
}

nav {
  position: relative;
}

,

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

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

,

可以使用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.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,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>