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

Question

I'am making a Navbar to a website and I want it to be fixed at the top , so that when I scroll down the navbar is still acessible.
However, the NavBar position is relative (should be fixed , I know) because I have absolute elements which are relatively positioned to it.
If I change the position from relative to fixed the navbar looks and background color fall apart.
You can see the code below :
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>Página Inicial</li>
<li>Galeria</li>
<li>Encomendas</li>
<li>Contactos</li>
</ul>
</div>
I would like to know if there is any way I can make the navbar element position fixed but also relative in order to make the absolute elements stay in place.

Answer 1

Put all the elemets in the navbar tag and give it style position: relative so the absolute positioned elements stays in the nav.
Put the nav element in the header, and style it 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

This is a rather simple solution, when changing the position from relative to fixed, create and set a width style equal to 100%.
#cabeçalho {
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
height: 110px;
}

Answer 3

It is possible to use flexbox layout. If it is used, then it will be simple to make columns to be set like row. And then there will be no need to use absolute positioning. In addition, your unordered list can be responsive, if we use flexbox layout. So the code would look like this:
.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">
Página Inicial
</div>
<div class="list-item order-2">
Galeria
</div>
<div class="list-item order-3">
Encomendas
</div>
<div class="list-item order-4">Contactos</div>
</div>
</div>
</div>
</div>