zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierung z-index und IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.12.2007, 16:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.01.2004
Beiträge: 14
Blub befindet sich auf einem aufstrebenden Ast
Standard Positionierung z-index und IE

Hallo

der IE bereitet mir mal wieder Probleme bei der Positionierung von Elementen.

Ich habe ein "Eltern"-Div mit einer relativen Positionierung und ein "Kind"-Div darinliegend, mit einer absoluten Positionierung.

Soweit ich das bisher kenne, richtet sich nun die absolute Positionierung des Kindelements an der relativen Positionierung des Elternelements.

Im Firefox wird das auch richtig umgesetzt. Auf der Grafik kann man sehen das der weiße Test-Block durch den gesetzen z-index den nächsten grünen Block überdeckt. Beim IE ist das allerdings nicht der Fall.



Weiß jemand warum das so ist ??

Hier der Beispiel-Code

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>
      Untitled Document
    </title>
    <style type="text/css">
          .parent{
      position:relative;
      width:50px;
      height:50px;
      background:green;
      border:1px solid white;
      }
    
    .child{
      position:absolute;
      top:10px;
      left:10px;
      z-index:10;
      width:200px;
      height:200px;
      background:white;
      border:1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">
        test
      </div>
    </div>    
    <div class="parent">
      <div class="child">
        test
      </div>
    </div>
  </body>
</html>
Angehängte Grafiken
Dateityp: jpg pos_block.jpg (8,8 KB, 29x aufgerufen)

Geändert von Blub (09.12.2007 um 16:30 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.12.2007, 16:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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

Der IE schafft auch dann einen neuen Stacking Context, wenn kein z-index angegegeben ist. Er verhält sich also, also stünde bei .parent jeweils z-index:0 dabei.

Bitte schreib deine Style-Angaben untereinander, damit auch Menschen sie lesen können. Danke.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.12.2007, 16:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.01.2004
Beiträge: 14
Blub befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Der IE schafft auch dann einen neuen Stacking Context, wenn kein z-index angegegeben ist. Er verhält sich also, also stünde bei .parent jeweils z-index:0 dabei.
Ja, leider

Das Problem ist, wie bringe ich es dem IE bei, dies nicht zu tun.

Die Grünen Boxen sollen später Adress-Blöcke von Personen darstellen und das jeweilige weiße Test-Div ist ein Tooltip das bei Mouseover der Adress-Anzeige eingeblendet wird.

Nun soll natürlich der Tooltip nicht unterhalb des nächsten Adress-Blocks angezeigt werden sondern darüber.

Ich weiß nicht wie ich den Tooltip positionieren soll, damit er 1. sich an seinem jeweiligen Elternelement (Adress-Block) ausrichtet und 2. den nächsten Adressblock (auch im IE) überdeckt.

Zitat:
Zitat von fricca Beitrag anzeigen
Bitte schreib deine Style-Angaben untereinander, damit auch Menschen sie lesen können. Danke.
Habs nun etwas leserlicher dargestellt.
Mit Zitat antworten
  #4 (permalink)  
Alt 09.12.2007, 16:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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 Blub Beitrag anzeigen
Das Problem ist, wie bringe ich es dem IE bei, dies nicht zu tun.
Gar nicht.
Zitat:
Die Grünen Boxen sollen später Adress-Blöcke von Personen darstellen und das jeweilige weiße Test-Div ist ein Tooltip das bei Mouseover der Adress-Anzeige eingeblendet wird.
Bei solchen Einblendgeschichten ist es als Workaround möglich, die Positionierung des Elternelements erst bei "Mouseover" vorzunehmen.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.12.2007, 16:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.01.2004
Beiträge: 14
Blub befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Gar nicht.
Hab ich mir fast gedacht.
Zitat:
Zitat von fricca Beitrag anzeigen
Bei solchen Einblendgeschichten ist es als Workaround möglich, die Positionierung des Elternelements erst bei "Mouseover" vorzunehmen.
Super, hab das gerade mal statisch simuliert, da das Javascript noch nicht existiert.

Klappt so wunderbar, vielen vielen Dank!!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>
      Untitled Document
    </title>
   
  <style type="text/css">
   .parent-by-event{
      position:relative;
      width:50px;
      height:50px;
      background:green;
      border:1px solid white;
      }  
  
   .parent{
      width:50px;
      height:50px;
      background:green;
      border:1px solid white;
      }
    
    .child{
      position:absolute;
      top:10px;
      left:10px;
      z-index:10;
      width:200px;
      height:200px;
      background:white;
      border:1px solid black;
      }
  </style>
  </head>
  <body>
    <div class="parent-by-event">
      <div class="child">
        test
      </div>
    </div>    
    <div class="parent">
       &nbsp;
    </div>
  </body>
</html>
Mit Zitat antworten
Antwort

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
Firefox 4 und Positionierung ChOpSueY! CSS 2 09.05.2011 23:04
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? damonster CSS 12 27.08.2008 16:56
komplexe Positionierung new user CSS 1 19.09.2007 12:51
Barrierefreiheit - Absolute Positionierung dbub Barrierefreiheit 19 13.06.2007 17:58


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