Header mit Logo Navi und mobile Navi fixieren klappt nicht

Hallo Leute,

ich weiß leider nicht mehr weiter. Seit 2 Tagen schaffe ich es einfach nicht einen Header (Höhe 100px) zu fixieren.
Im Header befindet sich links ein Logo ind der Mitte die Hauptnavigation und rechts der Trigger.
Header: z-index: 999; Logo: z-index: 800; Navigation: z-index: 700; Trigger: z-index: 600 - funktioniert nicht!!!
Und dann habe ich noch einen Footer und natürlich auch die Cookiebar, der ich einen z-index: 1000 !impotrant; gegeben habe. (Standardmäßig 10)
Container, Main, Wrapper habe ich position relative gegeben (aber noch keinen z-index)

Ich weiß, dass es was mit dem z-index zu tun hat. Egal was ich für eine Zahl eingebe. Der Header mit samt Logo Nav und Trigger wird nicht fixiert, trotz position: fixed, top:0

Kann mir jemand von euch helfen.
Leider läuft die Seite noch auf Xampp.
Vielen Dank!
VG

Wenn ich etwas fixieren möchte dann denke ich eher an position:fixed. Z-index sorgt dafür, dass man Elemente übereinanderstapeln kann, beispielsweise um eine fixierte Topleiste dazu zu bewegen, immer über dem anderen Inhalt zu liegen.

Ohne Link wird das aber schwer zu sagen sein, an welchen Stellen Dein CSS suboptimal ist.

Ich habe den Header erstmal schon fixiert. position: fixed, top: 0
Das Logo rechts ebenfalls und absolut positioniert, die navigation ebenfalls fixiert un den Trigger rechts absolut positioniert und ebenfalls fixiert.
Ich verstehe es einfach nicht!!

Die Css sieht so aus:
#header {
width:100%;
height:100px;
top:0;
position:fixed;
background-color:rgba(83,83,83,.4);
border-bottom:5px solid rgba(83,83,83,1);

#logo {
width:155px;
height:30px;
top:0;
position:absolute;
margin-top:40px;
margin-left:70px;
background-image:url("files/Bilder/logo.png");
background-repeat:no-repeat;

#nav {
width:100%;
height:100px;
left:280px;
top:0;
position:fixed;

#mobile_nav {
width:43px;
height:43px;
right:40px;
top:25px;
position:fixed;
curser:pointer;

Vielleicht hilft das ja. Wäre toll. Dankeschön

Du willst doch nur den header fixieren oder?
Die Navi liegt doch innerhalb vom header,vermute ich mal, dann solltest Du nicht alles fixieren, das kann ja nicht klappen, bzw. gut aussehen ;)

ich werde das mal probieren und melde mich gleich nochmal.
Aber aussehen tuts normal.

ich habe jetzt nur den header fixiert und alles andere absolut positioniert.
Es funktioniert trotzdem nicht.
#header {
width:100%;
height:100px;
position:fixed;
display:block;
background-color:rgba(83,83,83,.4);
border-bottom:5px solid rgba(83,83,83,1);
z-index: 1000;
}
Nehme ich den z-index raus verschwindet auch der Header komplett mit Logo und Navi.

Ich vermute, dass wrapper, container ebenfalls einen z-index braucht sobald doch etwas absolut positioniert ist oder fixiert ist, oder nicht?

Ach so das war jetzt ein Denkfehler, wenn der Header fix ist, dann ist es natürlich blöde wenn darin absolut positionierte Elemente liegen -
denn die sind ja eben dann absolut und richten sich nicht nach dem fixierten header.
ALso wenn es denn schon so sein muss, dann musst Du die das so bauen, das um die absolut positionierten sich ein relativ positioniertes div befindet.
und dann das übergeordnete position:fixed

Man müsste es wirklich sehen, aber Du muss eigentlich nichts mit z-index machen - klingt jedenfalls für mich alles zu kompliziert.
Nachtrag: der header natürlich schon, hast Du doch auch gemacht in Deinem CSS - das geht nicht?

Ich kann es jetzt nicht nachstellen, aber der header fix das .inside sollte dann relativ sein (ist es normalerweise im css wenn Layoutbuilder aktiv) und darin wieder absolute Elemente - irgendwie so?

Ach so das war jetzt ein Denkfehler, wenn der Header fix ist, dann ist es natürlich blöde wenn darin absolut positionierte Elemente liegen -
denn die sind ja eben dann absolut und richten sich nicht nach dem fixierten header.

achso!!

Das geht ja gar nicht anders als absolut zu positionieren.
Im Quelltext ist das ja untereinander.

Du meinst ich soll den header.inside ein position relative geben und dann kann ich Logo, Navi und Trigger absolut positionieren???
Hab ich das richtig verstanden??

hast du zufällig eine mobile Navigation irgendwo eingebunden die als Offcanvas den gesamten Inhalt verschieben?
Das macht Probleme mit position: fixed.

Zitat:

---

Du meinst ich soll den header.inside ein position relative geben und dann kann ich Logo, Navi und Trigger absolut positionieren???
Hab ich das richtig verstanden??

---

Ich denke so müsste es gehen , wie gesagt die Klasse .inside ist wenn du den Layoutbuilder benutzt schon relativ gesetzt, aber das siehst Du mit den Webtools vom Chrome oder Firefox z.B.

Es kann allerdings sein, dass da jetzt noch irgendwelche Nebeneffekte auftreten, die wir nicht beurteilen können ohne es zu sehen.
Bedenke auch dass das Innere deines Headers, wenn er fixiert ist und 100% breit, wiederum begrenzt und in der Mitte gehalten werden sollte - aber vielleicht möchtest Du das ja gar nicht. ;)

vielen, vielen Dank.
So lernt man. Toll, dass es euch Experten hier gibt.
Kann das aber erst später oder morgen probieren.

Nur habe ich noch ein Problem.

Warum ist der Text im ce-textmodul in der mobilen Ansicht rechts bis zum Rand, teilweise um 1-2 Buchstaben abgeschnitten (obwohl padding right 20px angegeben wurde) und links wird der Abstand padding-left 20px eingehalten.

Was mache ich da falsch?

Wie sieht es denn mit einem Link zur Problemseite aus. Ohne Link stochert man immer leicht im Nebel bzw. kann nicht wissen, welches andere css-noch einen Einfluss auf die fraglichen Bereiche hat.

Das tut mir Leid.

Der Aufbau der Seite läuft auf Xampp.
Ich habe den Textblöcken kein padding verpasst und die breite auf 96% gesetzt, da der Hintergrund eh weiss ist.

Somit ist das hier gelöst.
Danke!