Html макет div с фиксированной позицией

Question

Я редко делаю html / css вещи, поэтому я изо всех сил пытаюсь реализовать то, что кажется довольно базовым c макетом. У меня есть куча элементов div, уложенных вертикально, а также по центру по горизонтали на моей странице html. Проблемы, с которыми я сталкиваюсь:

a) верхний div (оранжевый) немного шире, чем другие div.

b) Я хочу, чтобы верхний (оранжевый) div был виден, даже если прокрутка, что в настоящее время не так.

На самом деле, чтобы сделать верхний div всегда видимым, я установил атрибут position соответствующего класса на fixed, но он не работает, так как у меня также есть другие div , и их положение устанавливается относительно. Если я удалю относительное положение на других div, оранжевый div будет работать должным образом, но остальные div больше не будут центрированы по горизонтали.

.fiksan {
  background-color: orange;
  position: fixed;
  top: 0;
  height: 40px;
}

div {
  padding: 10px;
  color: white;
  width: 60%;
  left: 20%;
  position: relative;
  top: 40px;
}

.naslov {
  background-color: lightblue;
  text-align: justified;
  height: 180px;
  position: relative;
}

.elementi {
  background-color: blue;
  height: 650px;
}

.css_elementi {
  background-color: purple;
  height: 400px;
  position: relative;
}

<div class="fiksan">
</div>

<div class="naslov">

</div>

<div class="elementi">

</div>

<div class="css_elementi">

</div>

Вот как это выглядит сейчас (при прокрутке верхний div перекрывается другими div, а я этого не хочу)

Answer 1

position:sticky может быть тем, что вы ищете: см. https://css-tricks.com/position-sticky-2/

.fiksan {
  background-color: orange;
  position: sticky;
  top: 0;
  height: 40px;
}

div {
  padding: 10px;
  color: white;
  width: 60%;
margin:auto;
 
}

.naslov {
  background-color: lightblue;
  text-align: justified;
  height: 180px; 
}

.elementi {
  background-color: blue;
  height: 650px;
}

.css_elementi {
  background-color: purple;
  height: 400px; 
}

<div class="fiksan">
</div>

<div class="naslov">

</div>

<div class="elementi">

</div>

<div class="css_elementi">

</div>