Einzelnen Beitrag anzeigen
  #9 (permalink)  
Alt 01.02.2017, 17:43
Benutzerbild von etux
etux etux ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von all4pages Beitrag anzeigen
Ja aber ich will nicht mit negativen margins arbeiten, wenn Du das gemeint hast.
Und warum nicht?!?
So auf die Schnelle ein Beispiel:
HTML-Code:
<!DOCTYPE html>
<meta charset="utf-8">
<title>all4pages :: xhtmlforum.de</title>
<style>
body {
  font-family: "Lato", sans-serif;
}
nav {
  background: #0080c0;
  height:56px;
  color:white;
  
  /* Sticky */
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.bild-with-text {
  margin-top:20px;
  margin-bottom: 50px;
  text-align: center;
}
.bild {
  display: inline-block;
  vertical-align: bottom;
  width: 900px;
  max-width: 100%;
  height: 1000px;
  margin-right: -900px;
  background: transparent url("http://www.maennernews.info/uploads/bugattiveyrongrandsport.jpg") top left repeat-y;
  background-size: contain;
}
@media screen and (max-width: 900px) { .bild { margin-right: -100%; } }
.text {
  display: inline-block;
  vertical-align: bottom;
  text-align: left;
  width: 900px;
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #26aae7;
}
</style>
<h1>Das ist ein Stickymenü</h1>
<p>Leider gehen Inhalte, wie das Bild beim Scrollen über das Sticky-Menü, weil sie in einem Div-Layer liegen der position:relative hat. Ich brauche die position:relative aber weil ich Text in diesem Div-Layer richtig positionieren will (bottom).</p>
<p>Warum schiebt sich ein relativer DIV über einen Sticky DIV und wie kann man das umgehen?</p>
<nav>Testnavigation Button1 Button2 Button3</nav>
<div class="bild-with-text">
  <div class="bild"></div><!--
  --><div class="text">Das ist der Text</div>
</div>
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links