Dropdown-Menü verschiebt Seiteninhalt nach unten (CSS?)

[McMoneysack91]

Liebe Freunde,

Meine Suchleiste wirft beim Beschreiben passende Links in einem aufklappenden Menü aus. Mein Problem ist aber, dass die aufploppenden Links den gesamten Seiteninhalt nach unten verschieben. Zu Demonstrationszwecken habe ich jetzt einfach mal einige Dummy-Elemente mit eingebaut.

So sieht die Suchleiste aus, bevor man sie anfasst:

Und so sieht sie aus, wenn man anfängt was zu schreiben und die ersten Ergebnisse kommen:

Wie man sieht, werden alle darunterliegenden Elemente nach unten verschoben. Ich weiß, dass es bestimmt eine Banalität im CSS ist, die mir entgangen ist.

Mein Ziel ist es, dass sich das aufklappende Menü ÜBER den Seiteninhalt legt, statt ihn zu verschieben.

Der CSS-Code sieht derzeit so aus:

/* The search field */
#myInput {
  box-sizing: border-box;
  font-size: 18px;
  padding: 15px 20px 12px 15px;
  border: none;
}

/* The search field when it gets focus/clicked on */
#myInput:focus {
  border: 1px solid #ddd;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: absolute;
  display: inline-block;
}


/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}


body {
 background-color: #80AACC;
}


#myDropdown {
 align: center;
 width: 40%;
 margin: 0 auto;
 background-color: transparent;
}

#myInput {
 width: 100%;
 border: 1px solid;
}
   
#myDropdown .inner {
 display: flex;
 flex-direction: column;
 border: 1px solid;
 z-index: 1000;
 background: white;
 opacity: 20%;
 transition: opacity 1s;
 pointer-events: none;
}
   
#myDropdown:focus-within .inner {
 opacity: 1;
 pointer-events: all;
}
   
#myDropdown .inner a {
 display: none;
}

 

[netzgestaltung]

bei position absolute wirkt es nur, wenn du einen top wert angibst. zdb top:100%;

 

[McMoneysack91]

einfach als neue Zeile?

top: 100%; ? Falls ja, hab ich soeben erfolglos probiert.

Ich als Laie hätte eher irgendwo den z-index vermutet.

 

[floq0r]

@netzgestaltung spricht von den CSS rules für die class .dropdown.

Btw, Herr [Name entfernt], ich würde an Ihrer Stelle Ihre Screenshots redacten damit nicht jeder weiß, dass Sie bei der Polizei NRW beschäftigt sind

 

[savuti]

Kaum ist ein Polizist anwesend wird schon gesiezt…

 

[McMoneysack91]

@floq0r lieben Dank für den Hinweis, wobei das mein ich kein Geheimnis ist, da ich schon bei mehreren Projekten die Zwecke mitgeteilt habe. Mein Name ist ohnehin bekannt, da ich hier mit meinem YouTube-Kanal präsent bin

@savuti ich bin übrigens weiterhin dafür, dass wir uns duzen Vor dem Code sind alle User gleich

 

[floq0r]

@McMoneysack91 Da gibt es keine betriebsinterne policy? Aber wenn du dir dessen eh bewusst bist dann ist es ja gut.
@savuti Das war eher gedacht um der Anrede per Nachname Nachdruck zu verleihen, "du Herr [Name entfernt]" klingt komisch. Darüber hinaus gibt es denke ich kein Nachsendeabkommen für die Zustellung von Bußgeldbescheiden wegen Beamtenbeleidigung ins EU-Ausland

 

[McMoneysack91]

Mir fällt auf, dass ich noch Code herumliegen habe zur Navigationsleiste mit Dropdown Unterseiten. Hab ihn mir einfach mal zur Not abgespeichert. Und dieser CSS-Code funktioniert tadellos in dem Sinne, dass die aufklappenden Menüs und ihre jeweiligen Untermenüs immer ausschließlich über dem Content schweben und nie den Seiteninhalt verzerren.

Der dortige CSS-Code sieht so aus:

/* NAVIGATION */

.topnav {
 grid-area: nav;
 grid-column: col-start 2 / span 10;
 grid-row: 2;
 margin-bottom: 20px;
 overflow: visible;
 background-color: #275574;
 font-size: 16px;
}

/* Nav Top-Page */

nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

nav ul a:hover {
 background: #3778a3;
}

nav ul li {
 float: left;
}

nav ul li a {
 float: left;
 color: rgb(255, 255, 255);
 padding: 10px 25px;
 text-decoration: none;
 background: #275574;
 border-left: 0px solid;
 border-right: 0px solid;
 border-top: 0px solid;
 border-bottom: 0px solid;
}

/* Nav Sub-Page1*/

nav li ul {
 background: #4788b4;
 left: -999em;
 margin: 35px 0 0;
 position: absolute;
 width: 180px;
 z-index: 9999;
}

nav li ul a {
 background: none;
 border: 0 none;
 margin-right: 0;
 width: 180px;
 border-bottom: 1px solid transparent;
 border-top: 1px solid transparent;
}

nav ul li a:hover,
nav ul li:hover > a {
 background: #3778a3;
}

nav li ul a:hover,
nav ul li li:hover > a {
 background: #3778a3;
 border-bottom: 1px solid;
 border-top: 1px solid;
}

nav li:hover ul {
 left:auto;
}

nav li li ul {
 margin: 0 0 0 180px;
 visibility:hidden;
 border-left: 1px solid transparent;
}

nav li li:hover ul {
 visibility:visible;
}

Hier habe ich anscheinend auch mit position: absolute; gearbeitet, ohne sie weiter zu bestimmen. Ist natürlich nicht 1:1 anzuwenden, das versteh ich, weil es hier um reinen HTML-Code geht und in diesem Thread eher um einen JavaScript. Aber vielleicht ein Ansatz.