Bild bewegt sich über die Menüleiste hinaus

Question

Hallo,

wie kann ich verhindern dass das eingefügte Bild beim scrollen über die Menüleiste hinaus geht:

Besten Dank!

Answer 1

Es kommt ein wenig darauf an, wie die Menüleiste positioniert ist (CSS-Eigenschaft position). Im einfachsten Fall ergänzen Sie in den style-Parametern der Menüleiste noch ein position: relative;

Für genauere Details müssten Sie bitte einen Pretest-Link direkt (!) zur betroffenen Seite posten.

Comments

Hier der HTML code im Sylesheet zur Menüleiste (position: relative; funktioniert leider nicht):


<style>
ul {
position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>

<ul>
<li><img src="logo.png" style="width: 40px;"></li>
  <li style="float:left";><a class="active" href="#about"><strong>Home</strong></a></li>

    <li style="float:right"><a >Contact</a></li>
  <li style="float:right"><a >News</a></li>
<li style="float:right"><a >About</a></li>

</ul>

Besten Dank!

---

Hier der Pretestlink zur Seite: https://www.soscisurvey.de/CrowdWork/?act=iDvYNPcovHnaedTWcSd2HHdq

---

Wenn die Postion "fixed" ist, müssen Sie sich nur noch um die Abfolge der "Schichten" auf dem Bildschirm Sorgen machen.

In Ihrem Fall brauchen Sie nur ein "z-index" für das <ul> Element:

ul {
  position: fixed;
  z-index: 20;
  ...