Wie man eine Schaltfläche in den Kopfbereich hinzufügt

Entwickler
14

Sie können die Suchleiste auch mit absoluter Positionierung aus dem Fluss nehmen.
Sie benötigen margin nicht mehr.

.floating-search-input-wrapper {
   position: absolute;
   left: 0;
   top: calc((4em - 2.6rem - 2px - 2px) / 2);  /* header height - search height - margin - border */
   width: 100%;
}

Möglicherweise müssen Sie eine Media Query hinzufügen, um die Breite bei niedrigeren Auflösungen zu steuern und sicherzustellen, dass sie sich nicht mit anderen Elementen überschneidet.