Zitat:
Zitat von all4pages
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>