✔ z-index funktioniert nicht - Elemente nicht sichtbar

Eisbergsalat666

Eisbergsalat666

Mitglied
Hi,
ersteinmal vorweg die zwei CSS Codes um die es sich handelt:

CSS: 
div.parallax-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}
div.parallax-container div.parallax {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 2500px;
    text-align: center;
    height: 250px;
    font-weight: bold;
    z-index: -1;
}
.parallax1 {
    color: #555;
    font-size: 250px;
    line-height: 80%;
}
.parallax2 {
    color: #999;
    font-size: 100px;
    line-height: 320%;
}
.parallax3 {
    color: #fff;
    font-size: 50px;
    line-height: 760%;
}
Dies ist der Code der den Parallax Effekt auf drei Grafiken anwendet. Der Code und die dazugehörige Funktion funktionieren definitiv. Problem ist nur, sobald ich den Effekt in meine schon fertige Seite integrieren möchte, seh ich nur noch Hintergrund wo vorher das einfache Logo und jetzt das interaktive Logo hin soll.

Hier die relevanten Ausschnitte meiner layout.css (alles was mit dem header zu tun hat glaube ich)
CSS: 
/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   position: relative;
   height: 800px;
   min-height: 500px;
   width: 100%;
   background: #161415 url(../images/header-background.jpg) no-repeat top center;
   background-size: cover !important;
    -webkit-background-size: cover !important;
   text-align: center;
   overflow: hidden;
   z-index: 0;
}

/* vertically center banner section */
header:before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   height: 100%;
}
header .banner {
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
   width: 85%;
   padding-bottom: 30px;s
   text-align: center;
}

header .banner-text { width: 100%; }
header .banner-text h1 {
   font: 90px/1.1em 'opensans-bold', sans-serif;
   color: #fff;
   letter-spacing: -2px;
   margin: 0 auto 18px auto;
   text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}
header .banner-text h3 {
   font: 18px/1.9em 'librebaskerville-regular', serif;
   color: #6e6e6e;
   margin: 0 auto;
   width: 70%;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
}
header .banner-text h3 span,
header .banner-text h3 a {
   color: #fff;
}
header .banner-text hr {
   width: 60%;
   margin: 18px auto 24px auto;
   border-color: #2F2D2E;
   border-color: rgba(150, 150, 150, .1);
}
header .banner-logo {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* header social links */
header .social {
   margin: 24px 0;
   padding: 0;
   font-size: 30px;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .8);
}
header .social li {
   display: inline-block;
   margin: 0 15px;
   padding: 0;
}
header .social li a { color: #fff; }
header .social li a:hover { color: #11ABB0; }

/* scrolldown link */
header .scrolldown a {
   position: absolute;
   bottom: 30px;
   left: 50%;
   margin-left: -29px;
   color: #fff;
   display: block;
   height: 42px;
   width: 42px;
   font-size: 42px;
   line-height: 42px;
   color: #fff;
   border-radius: 100%;

   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}
header .scrolldown a:hover { color: #11ABB0; }

ich hab die site mal, mit dem Fehler, onlinegestellt....unter www.eisbergsalat666.bplaced.net

ich weiß das die ladezeiten noch immens-negativ sind, aber darum wollt ich mich erst später kümmern :)

ich DANKE für jede Hilfe im Voraus und weise schoneinmal vorsorglich darauf hin, dass ich eine ziemliche Anfängerin bin




...achja, da fällt mir noch ein, Ihr wollt bestimmt noch den Quellcode des betroffenen Bereichs sehen.
HTML: 
   <!-- Header
   ================================================== -->
   <header id="home">
      <nav id="nav-wrap">
            <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
              <a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
             <ul id="nav" class="nav">
            <li class="current"><a class="smoothscroll" href="#home">Home</a></li>
            <li><a class="smoothscroll" href="#about">Über mich</a></li>
            <li><a class="smoothscroll" href="#music">Musik</a></li> <!-- einst RESUME -->
            <li><a class="smoothscroll" href="#media">Medien</a></li> <!-- einst PORTFOLIO -->
    <!--    <li><a class="smoothscroll" href="#videos">Videos</a></li>  Testimonials / Videos -->
            <li><a class="smoothscroll" href="#shows">Auftritte</a></li>
            <li><a class="smoothscroll" href="#contact">Kontakt</a></li>
         </ul> <!-- end #nav -->

      </nav> <!-- end #nav-wrap -->
         


      <div class="row banner">
         <div class="banner-text">
               <div class="banner-logo">
                <div class="parallax-container" data-jkit="[parallax:strength=2;axis=both]">
                    <div class="parallax parallax1"><img src="images/balloons-3.png"></div>
                    <div class="parallax parallax2"><img src="images/balloons-2.png"></div>
                    <div class="parallax parallax3"><img src="images/balloons-1.png"></div>
                </div>
            </div>
         
            <h3><span>Herzlich willkommen auf der offiziellen Webseite von Wolf !</span><br>
            Hier erfahren Sie alles Wissenswerte zu Ihrem
            <span><a class="smoothscroll" href="#about">Lieblingsstar</a></span>
             – angefangen von
            <span><a class="smoothscroll" href="#music">Musik</a>, <a class="smoothscroll" href="#media">Bildern</a></span>
            und <span><a class="smoothscroll" href="#media">Videos </a></span>
            der letzten
            <span><a class="smoothscroll" href="#shows">Auftritte</a></span>
            , bis hin zu anstehenden
            <span><a class="smoothscroll" href="#shows">Veranstaltungen</a></span>
             finden Sie hier alle Informationen. Des Weiteren können Sie Anmerkungen und Eindrücke im
            <span><a class="smoothscroll" href="#guestbook">Gästebuch</a></span>
             hinterlassen. Somit wünsche ich Ihnen viel Spaß beim Stöbern auf dieser Webseite !
</h3>
            <hr />
            <ul class="social">
               <li><a href="#"><i class="fa fa-facebook"></i></a></li>
               <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
               <li><a href="#"><i class="fa fa-instagram"></i></a></li>
               <li><a href="#"><i class="fa fa-youtube"></i></a></li>
            </ul>
         </div>
      </div>

      <p class="scrolldown">
         <a class="smoothscroll" href="#about"><i class="icon-down-circle"></i></a>
      </p>

   </header> <!-- Header End -->
 
Zuletzt bearbeitet:
Grafixboy hat gesagt.:
Also verstehe etwas anderes unter parallax scrolling aber,
falls es nur darum geht das der header nur teilweise sichtbar
ist tut es folgendes:
Code: 
<header style="height: 800px;" id="home">
bei dir ist der bei 434px
funktioniert (getestet im firefox)

PS:
Code: 
header {
   position: relative;
   height: 800px;
... Auszug
}
diese definition
wird von deiner überschrieben
Code: 
<header style="height: 434px;" id="home">
Zum Vergrößern anklicken....
Dieser Inline-Style existiert überhaupt nicht im HTML-Code, sondern wird lediglich von Firebug ausgegeben, weil die Viewport-Höhe durch die FB-Benutzeroberfläche verringert wurde. Verkleinert man diese, erhöht sich automatisch auch wieder die Elementhöhe.

Zum Problem: z-index:-1 hat zur Folge, dass das Element in der Schichtposition vom <header>-Element verdeckt wird - hier wäre ein positiver Wert zu wählen. Desweiteren sorgt width:2500px dafür, dass der horizontal zentrierte Elementinhalt (bei kleineren Bildschirmauflösungen / minimierten Browserfenster) aus dem sichtbaren Bereich des Viewports verschwindet.
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
schade grafixboy...dein Beitrag ist leider nicht mehr da...auch aus fehlern kann sich manch einer einen positiven effekt für sich ziehen...(forumsgedanken und so)...aber:
das was ich meine ist der sehr sehr alte und ursprüngliche parallax effekt....z.b. wie hier: http://jquery-jkit.com/commands/parallax.html .... das prallax scrolling ist eine neue "erfindung" und wird von mir ebenfalls etwas abgewandelt angewendet.
das mit dem z-index habe ich schon ausprobiert...gestern abend noch. auch bei werten von 2, 10, 50, 100 oder 500 passiert mit der sichtbarkeit leider gar nichts. Das logo wie es sein soll findet ihr hier: http://www.eisbergsalat666.bplaced.net/test/test.html
jedoch bekomm ich das einfach nicht über den header-background gelegt....das ärgert mich :((
 
Eisbergsalat666 hat gesagt.:
das mit dem z-index habe ich schon ausprobiert...gestern abend noch. auch bei werten von 2, 10, 50, 100 oder 500 passiert mit der sichtbarkeit leider gar nichts.
Zum Vergrößern anklicken....
Siehe die zweitgenannte Ursache:
SpiceLab hat gesagt.:
Desweiteren sorgt width:2500px dafür, dass der horizontal zentrierte Elementinhalt (bei kleineren Bildschirmauflösungen / minimierten Browserfenster) aus dem sichtbaren Bereich des Viewports verschwindet.
Zum Vergrößern anklicken....
 
ha...das ist immer so ärgerlich wenn man im nachhinein sieht, dass der fehler völlig offensichtlich war...aber man einfach blind dafür ist. :) Danke SpiceLab !

Weiß zufällig jemand, warum ich nichts von dem eigentlichen effekt sehe? ich habe die grafiken übereinander auf dem hintergrund. nur leider scheint irgendwas das script zu verhindern. auf http://www.eisbergsalat666.bplaced.net/test/test.html sieht man ja das es eigentlich funktionieren sollte...warum das jetzt nicht der fall ist, weiß ich nicht wirklich.
ich hab auf www.eisbergsalat666.bplaced.net mal die aktuelle site hochgeladen, damit ihr seht was ich meine
 
Eisbergsalat666 hat gesagt.:
ha...das ist immer so ärgerlich wenn man im nachhinein sieht, dass der fehler völlig offensichtlich war...aber man einfach blind dafür ist. :) Danke SpiceLab !
Zum Vergrößern anklicken....
Gern geschehen - vier Augen sehen immer mehr, wie zwei :cool:
Eisbergsalat666 hat gesagt.:
Weiß zufällig jemand, warum ich nichts von dem eigentlichen effekt sehe? ich habe die grafiken übereinander auf dem hintergrund. nur leider scheint irgendwas das script zu verhindern. auf http://www.eisbergsalat666.bplaced.net/test/test.html sieht man ja das es eigentlich funktionieren sollte...warum das jetzt nicht der fall ist, weiß ich nicht wirklich.
ich hab auf www.eisbergsalat666.bplaced.net mal die aktuelle site hochgeladen, damit ihr seht was ich meine
Zum Vergrößern anklicken....
Entferne hierzu einfach Code-Zeile 1038, die eine zweite jQuery-Bibliothek ins Dokument lädt, und in der Testseite nicht existiert:
HTML: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
D U B I S T D E R G E I E L S T E !!!!! :rolleyes::):)

Danke! du hast keine Ahnung wie unglaublich du mir geholfen hast! ich sitz seit knapp fünf tagen an diesem sch**ß effekt und bekomm den nicht zum laufen....und dann kommst du daher gelaufen und sagst aus dem ärmel was sache ist. BESTE !
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück