zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden z-index und das body element

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.03.2012, 10:43
Benutzerbild von fertone
Mediengestalter AZUBI
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2009
Ort: Berlin
Beiträge: 13
fertone befindet sich auf einem aufstrebenden Ast
Rotes Gesicht z-index und das body element

hallöchen werte community.
ich habe in einem projekt das body element als wrapper genutzt. weiter habe ich, außerhalb dessen, eine weiteres div per position: fixed angezeigt (also es ist in html im body).
beide elemente sind positioniert und haben festgelegte abmaße. wenn ich jedoch nun das browserfenster verkleinere, rutscht logischerweise das gefixte div über meinen content bereich (ist zentriert).

ich dachte, ich könnte das ganze elegant mit z-index lösen und das betreffende div einfach unter den body schieben. leider funktioniert das so nicht.
im firebug kann ich auch ablesen, dass beide elemente z=0 haben.

kann es sein, dass das body element gar keinen z-index haben kann? oder steh ich einfach nur mal morgentlich aufm schlauch???

mfg
__________________
Zitat:
„Das Sein bestimmt das Bewusstsein.“
Karl Marx
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.03.2012, 14:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 747
mermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblick
Standard

Ich habe es auf die Schnelle nicht eindeutig in der Doku gefunden, aber ich vermute sehr stark das hier:

Ein Elternelement liegt immer unterhalb (z-Achse) seiner Kindelemente.

Der z-index bezieht sich nur auf die Anordnung der Geschwisterelemente, also der Elemente mit identischem Elternelement.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.03.2012, 16:04
Benutzerbild von fertone
Mediengestalter AZUBI
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2009
Ort: Berlin
Beiträge: 13
fertone befindet sich auf einem aufstrebenden Ast
Reden

DANKE! Sowas in der Art, vermutete ich auch. Und obendrein ist das body Element ja auch nicht irgend ein Block oder Inline Element. Schon deswegen ist meine Frage i-wie doof gewesen. Aber interessant ists schon! Vor allem, da man den body so wunderbar als wrapper ersatz nutzen kann (könnte....)
MFG!
__________________
Zitat:
„Das Sein bestimmt das Bewusstsein.“
Karl Marx
Mit Zitat antworten
  #4 (permalink)  
Alt 08.03.2012, 18:05
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.821
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von mermshaus Beitrag anzeigen
Ich habe es auf die Schnelle nicht eindeutig in der Doku gefunden, aber ich vermute sehr stark das hier:
Du findest das erforderliche Wissen im Anhang E von CSS 2.1.

Zitat:
Zitat von mermshaus Beitrag anzeigen
Ein Elternelement liegt immer unterhalb (z-Achse) seiner Kindelemente.
Kindelemente können hinter dem Elternelement positioniert werden, wenn ihr z-Index negativ ist.

Zitat:
Zitat von fertone Beitrag anzeigen
Und obendrein ist das body Element ja auch nicht irgend ein Block oder Inline Element. Schon deswegen ist meine Frage i-wie doof gewesen. Aber interessant ists schon! Vor allem, da man den body so wunderbar als wrapper ersatz nutzen kann (könnte....)
MFG!
Doch, im Grunde ist das body-Element wirklich nur ein stinknormales Blockelement (für das drei CSS-spezifische Spezialregeln gelten). Das selbe gilt für das html-Element.

Es ist nicht immer sinnvoll, es als wrapper zu verwenden, aber man kann das html- und das body-Element durchaus für verschiedene Zwecke nutzen.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.

Geändert von gato (08.03.2012 um 18:09 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 09.03.2012, 04:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 747
mermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblick
Standard

Dann nehme ich alles zurück und behaupte das Gegenteil:

HTML-Code:
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>z-index Test</title>
        <style>
/*<![CDATA[*/
html {
    background: white;
    border-bottom: 1px solid red;
}
body {
    position: relative;
    margin: 40px 0 0 40px;
    width: 200px;
    height: 200px;
    background: salmon;
}
.child {
    position: relative;
    top: -20px;
    left: -20px;
    width: 200px;
    height: 200px;
    z-index: -5;
    background: greenyellow;
}
/*]]>*/
        </style>
    </head>

    <body>

        <div class="child"></div>

    </body>

</html>
Interessanter Artikel:

Misunderstood CSS Concepts

Was sind denn die Spezialregeln von html und body?

Ich muss zugeben, zu den Leuten zu gehören, die die Box-Model-Eigenschaften von html und body nicht anrühren, weil sie davon ausgehen, dass sonst mindestens der IE explodiert.



Edit: Ach ja, noch kurz @fertone: Das zeigt wieder sehr schön, dass ein Beispiel immer gut ist. Ich habe dir hier etwa deine Darstellung aus „Faulheit“ einfach geglaubt („Wird fertone schon richtig getestet haben.“) und habe dann – diesmal definitiv aus Faulheit – einfach mit gefährlichem Halbwissen geantwortet.

Geändert von mermshaus (09.03.2012 um 06:57 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 09.03.2012, 15:56
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.821
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von mermshaus Beitrag anzeigen
Interessanter Artikel:

Misunderstood CSS Concepts

Was sind denn die Spezialregeln von html und body?
Die, die auch im Artikel beschrieben werden: Das html-Element übernimmt - wenn es keine eigenen Definitionen besitzt - die Eigenschaften für background und overflow vom body-Element. Die Zeichenoberfläche (Canvas) übernimmt wiederum die background-Eigenschaften des Wurzelelements.

Nebenbei ist dieses System derzeit nur im Firefox fehelrfrei imlplementiert, was man schnell erkennt, wenn man dem html-Element ein Elternelement oder zwei body-Elemente verpasst (nur in XHTML möglich). Danach kommt IE9, Opera und als Schlusslicht - wer hätte es gedacht - WebKit.

Zitat:
Zitat von mermshaus Beitrag anzeigen
Ich muss zugeben, zu den Leuten zu gehören, die die Box-Model-Eigenschaften von html und body nicht anrühren, weil sie davon ausgehen, dass sonst mindestens der IE explodiert.
Erstaunlicherweise unterscheidet bereits IE6 sehr gut zwischen html- und body-Element. body ist wie ein Blockelement formatierbar. IE 7 unterstützt width für das html-Element, die Kombination mit margin: 0 auto; funktioniert dann aber doch erst ab IE8.

CSS ist wirklich sehr komplex, was dazu führt, dass manche Lösungen komplizierter sind als sie sein müssten. Beispielsweise die clearfix-Lösung: In dem Artikel von 2004, der die Methode als erstes beschrieb, wird in das Pseudoelement erst ein Punkt eingefügt und dann mit allen möglichen Eigenschaften wieder versteckt. Dabei reicht
HTML-Code:
.clearfix:after {
 content: ''; /* Pseudoelement erzeugen. */
 display: block; /* clear funktioniert nur bei Block-Boxen. */
 clear: both;
}
völlig aus (zumindest habe ich bei meiner Recherche keine Browser-Bugs entdeckt, die mehr Eigenschaften erfordern. Aber glaub mir, WebKit hat mit Clearance und Margin-Collapsing echt seine Schwierigkeiten.
Mit Zitat antworten
  #7 (permalink)  
Alt 09.03.2012, 20:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von gato Beitrag anzeigen
CSS ist wirklich sehr komplex, was dazu führt, dass manche Lösungen komplizierter sind als sie sein müssten. Beispielsweise die clearfix-Lösung: In dem Artikel von 2004, der die Methode als erstes beschrieb, wird in das Pseudoelement erst ein Punkt eingefügt und dann mit allen möglichen Eigenschaften wieder versteckt.
Damals war das völlig gerechtfertigt, denn in der Tat war das Clear mit einem leeren generierten Element in den damligen Browserversionen nicht zuverlässig (Geckos und Operas waren die Wackelkandidaten, wenn ich mich recht erinnere).

Zitat:
Dabei reicht
HTML-Code:
.clearfix:after {
 content: ''; /* Pseudoelement erzeugen. */
 display: block; /* clear funktioniert nur bei Block-Boxen. */
 clear: both;
}
Bei leerem content würde ich wie von Nicolas Gallagher vorgeschlagen auf display:table setzen. Denn damit vermeidet man Collapsing Margins unabhängig davon, ob tatsächlich eine Clearwirkung eintritt oder nicht.
Mit Zitat antworten
Antwort

Stichwörter
body, z-index

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ungewöhnlicher abstand beim clearen von floats adrianno CSS 14 16.09.2009 14:20
Festanstellung bei der Xing AG als Web Developer (HTML/CSS) NEOX Offtopic 10 17.07.2008 17:11
Ausrichtung Aufzählungszeichen snowbound_ch CSS 11 19.02.2008 20:12
overflow:scroll ... ohne feste größe zelle CSS 4 12.02.2006 19:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:15 Uhr.