✔ Möglichkeit, dass Kind-Elemente über Eltern drüber "hinausragen"

[dark_flash01]

Hallo,
gibt es mit CSS eine Möglichkeit, dass ein Kind-div sein Eltern-Element überragt?
Wie im Bild zusehen(Die blauen Linien kennzeichnen div-container.), stehe ich vor dem Problem, dass mein Häuschen oben abgeschnitten wird, obwohl es einen höheren z-index als das Eltern-Element hat.
Es wäre nun sehr ungünstig für mich das Div mit dem Bild vom Häuschen drin, auf die Ebene seines Elternelemtes (dem 256x256Pixel Hintergrundbild) zu tun.
Kennt jemand eine Möglichkeit, damit das Häuschen nicht abgeschnitten wird?

Lg Sebastian

 

[Sven Mintel]

Moin,

möglich ist alles, aber zeige doch mal deinen bisherigen Code....denn wenn das Haus ein Kindelement des Eltern.div's sind, ist es ja nicht normal, dass es da ist wo es ist, und abgeschnitten wird.

 

[Maik]

Wie im Bild zusehen(Die blauen Linien kennzeichnen div-container.), stehe ich vor dem Problem, dass mein Häuschen oben abgeschnitten wird, obwohl es einen höheren z-index als das Eltern-Element hat.

Hi,

wenn das Kind-DIV eine höhere Schichtposition besitzen würde, würde es nicht abgeschnitten werden, sondern den blauen Rahmen an dieser Stelle verdecken, will sagen, hier fehlt wohl eine Angabe zur Positionsart position (absolute oder relative), denn ohne sie greift z-index überhaupt nicht - siehe z-index.

mfg Maik

 

[dark_flash01]

Hallo,
danke für die schnellen Antworten. Ich verwende nur absolute-positionierte DIVs und haben diesen einen höheren z-index gegeben.
Ich hab hier mal mittels Firefox Web Developer den mit JavaScript generierten Code rauskopiert. Ist natürlich nur ein Ausschnitt, aber das relevante ist zu sehen.

<div id="mapPart1" style="border: 1px solid rgb(0, 0, 255); position: absolute; background-color: rgb(255, 0, 0); width: 256px; height: 256px; left: 263px; top: 190px; z-index: 1; color: white; background-image: url(/images/map_backgrounds/mappart_5_5.jpg);" alt="MapPart">
  <div id="Haus1" style="border: 1px solid rgb(0, 0, 255); position: absolute; left: 25px; top: -25px; z-index: 4;">
    <img src="/images/objects/house.gif">
  </div>
  <div id="Haus2" style="border: 1px solid rgb(0, 0, 255); position: absolute; left: 100px; top: 100px; z-index: 4;">
    <img src="/images/objects/house.gif">
  </div>
</div> 
<div id="mapPart2" style="border: 1px solid rgb(0, 0, 255); position: absolute; background-color: rgb(255, 0, 0); width: 256px; height: 256px; left: 519px; top: 190px; z-index: 1; color: white; background-image: url(/images/map_backgrounds/mappart_5_6.jpg);" alt="MapPart"></div> 
<div id="mapPart3" style="border: 1px solid rgb(0, 0, 255); position: absolute; background-color: rgb(255, 0, 0); width: 256px; height: 256px; left: 775px; top: 190px; z-index: 1; color: white; background-image: url(/images/map_backgrounds/mappart_5_7.jpg);" alt="MapPart"></div>

Vorschläge zum sichtbar machen des oberen Hauses wären toll

 

[Maik]

Ich kann dir da erstmal keinen weiteren Vorschlag unterbreiten, denn mit deinem Code-Snippet wird die Grafik bei mir browserübergreifend nicht abgeschnitten

Repräsentativ für alle mir zur Verfügung stehenden und gängigen Browser poste ich hier den FF3- und IE7-Screenshot:



Ansonsten solltest du, falls existent, den Teil vor diesem Ausschnitt nachreichen.

mfg Maik

 

[dark_flash01]

Hallo,
du hast natürlich recht. Es scheint ein Rendering-Fehler im Firefox zu sein (IE kann ich grad nicht testen). Die Grafiken werden in das DIV geladen, während sich das DIV an der oberen linken Ecke im Browser befindet. Sozusagen der überlappende Bildteil aus dem Anzeigebereich des Firefox herausragt-> Das Haus wird immer oben abgeschnitten. Bei einem anderen initialen Laden, lade ich die Bilder nun in der Mitte des Anzeige-Bereiches hinein... und siehe da! Es sieht so aus, wie es aussehen soll und auf deinen Bildern aussieht!
Großes Danke für die Hilfe. Ich werd mal gucken, ob ich an der Initialen DIV-Position noch was machen kann.

Lg Sebastian