Ebenen übereinander; Position nicht absolut

luaksi

Grünschnabel
Hallo an alle!

kann ich einen normalen Layer hinter einen Layer der nicht absolut positioniert (sondern mit "marginXYpx auto 0") ist legen?

Ich würde gerne ein weißes Rechteck als Layoutelement einbauen. Das würde dann hinter Layer1 und teilweise hinter Layer4 liegen.

Jetzt sieht der HTML Code so aus:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
	width:300px;
	height:115px;
	z-index:4;
	margin: 25px auto 0;
}
.style10 {font-size: 16px}
.style2 {font-size: 24px}
#Layer2 {
	position:absolute;
	width:141px;
	height:336px;
	z-index:5;
	left: 11px;
	top: 117px;
}
.style14 {font-size: 20px}
body {
	background-color: #FFFF33;
}
#Layer3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
	left: 6px;
	top: 14px;
}
#Layer4 {
	width:775px;
	height:2515px;
	z-index:2;
	margin-top: 65px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#Layer5 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 179px;
	top: 102px;
	background-color: #FFFFFF;
}
.style23 {font-size: 30px}
.style24 {font-size: 17px; }
.style25 {font-size: 14px}
.style28 {font-size: 20px; color: #0000FF; }
#Layer6 {
	position:absolute;
	width:117px;
	height:112px;
	z-index:6;
	right: 8%;
	top: 40px;
}
.style29 {font-size: 23px}
#Layer7 {
	
	width:200px;
	height:115px;
	z-index:1;
	margin-top: 65px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div id="Layer1">
   <div align="center"><span class="style2"><span class="style23">Round n+1</span><br />
     <span class="style14">immer in Essen, mit Freunden</span> </span><br />
    </div>
  <div id="Layer2">
    <p align="left"><span class="style10">info</span><br />
      <span class="style28"><em>N</em>ew Bretagne</span><br />
      <span class="style25">das sind: Phillip Aumann, Nico Burger, Frieder Haller,  Susanne Hefti, Anna-Lisa H&ouml;gler,  Dagobert J&auml;ger, Tom Marriott, Fabian Preuschoff,  Phung-Tien Phan, David R&ouml;der,  Alexander Sch&ouml;pfel, Jakob Schreier, Lara Steineman  und Niklas Taleb</span></p>
  </div>
    <div align="center"><span class="style10"><a href="newbretagne@gmail.com">Kontakt</a></span></div>
</div>
<div id="Layer4">
  <blockquote>
      <p class="style29">Round&quot;ZWEI&quot; DAGOBERT + Okin Cznupolowsky&amp;Aber Jakob<br />
        01. Februar 2013<br />
        Rellinghauser Str. 269, Essen(45136)</p>
      <div id="Layer6"><img src="../Webseite /Bildschirmfoto 2012-12-19 um 22.09.39150px.jpg" width="110" height="106" /></div>
      <p class="style24">Sehr geehrte Damen und Herren!</p>
      <p class="style24">zum neuen Jahr erm&ouml;glicht NEW BRETAGNE ENTERTAINMENT Ihnen f&uuml;r ROUND 2 unserer Ausstellungs- und Veranstaltungsreihe ein musikalisches Abendprogramm der besonders Extraklasse! In noch nie dagewesener Konstellation betreten 3 K&uuml;nstler aus Berlin und M&uuml;nchen die selten betretene B&uuml;hne des ehemaligen &quot;Funny People&quot; in Essen.</p>
      <p class="style24">Wir haben die gro&szlig;e Freude ein Konzert von S&auml;nger DAGOBERT (Berge/Berlin) ank&uuml;ndigen zu d&uuml;rfen. Das Vorprogramm bildet das mit ebenso gro&szlig;er Spannung erwartete Musiker-Entertainer-Duo Okin Cznupolowsky &amp; Aber Jakob (M&Uuml;NCHEN)</p>
      <p><span class="style24">Wir laden Sie herzlich ein sich am 01.02.2013 um 20 Uhr in der Rellinghauser Str. 269 in Essen(45136) einzufinden um an diesem Event teilzunehmen!<br />
      </span><br />
        </p>
      <p class="style25">Kosteproben und weiter Information: </p>
  </blockquote>
  <p align="center"><iframe width="560" height="315" src="http://www.youtube.com/embed/boymXRQV92w" frameborder="0" allowfullscreen></iframe>
  </p>
  <blockquote>
      <p><span class="style25">Dagobert<br />  
        <a href="http://www.facebook.com/DagobertOfficial?ref=ts&amp;fref=ts">http://www.facebook.com/DagobertOfficial?ref=ts&amp;fref=ts</a><br />
      Okin Cznupolowsky&amp;Aber Jakob <br />
        <a href="http://serbischerstudent.de/">http://serbischerstudent.de/</a><br />
        <a href="http://www.facebook.com/cznupolowsky?ref=ts&amp;fref=ts">http://www.facebook.com/cznupolowsky?ref=ts&amp;fref=ts</a></span><br />
      </p>
    <p><br />
    </p>
    <p>&nbsp;</p>
    <p><span class="style29">ROUND1 Keine Tricks<br />
      29. November &ndash; 09. Dezember 2012 <br />
      Steeler Str. 112, Essen(45139) </span><br />
      <span class="style24"><br />
      Auftakt der Ausstellungs- und Veranstaltungsreihe mit 10 jungen K&uuml;nstlerInnen aus Essen(45139),                                                                      Osten(Leipzig) und &Uuml;bersee(London).                                                                      Trotz Folkwangtypischem Fokus auf Fotografie werden Sie es auch mit &auml;lteren Medien wie Zeichnung                                                                      oder einfach nur Licht zu tun bekommen. Auch:Video.                                                                      Wir ersparen uns und Ihnen die Beschr&auml;nkungen, die ein streng abgestecktes Thema mit sich bringt.                                                                      Stattdessen. Mut zum Mut. Was kann das (fotografische)Bild noch leisten?                                                                      No Topographics? Erstmal leisten, dann weitersehen.                                                                                                                                                     <br />
      Mit: Phillip Aumann, Frieder Haller, Susanne Hefti, Anna-Lisa H&ouml;gler, Tom Marriott, Fabian Preuschoff,                                                                      Phung-Tien Phan, David R&ouml;der, Alexander Sch&ouml;pfel, Lara Steineman und Niklas Taleb </span></p>
    <p class="style25">Einiges von uns<br />
      <a href="http://newbretagne.de/publikFERTIG1.pdf">Round 1 Keine Tricks Publikation 1</a></p>
  </blockquote>
  <p><img src="../Webseite /_MG_4454.jpg" width="376" height="253" /><img src="../Webseite /kunst1.jpg" width="397" height="243" /><img src="../Webseite /_MG_4347 400px.jpg" width="391" height="260" /><img src="../Webseite /_MG_4361.jpg" width="384" height="255" /><img src="../Webseite /_MG_4497 400px.jpg" width="369" height="251" /><img src="../Webseite /_MG_4489.jpg" width="405" height="280" /></p>
  <p>&nbsp;</p>
  <p align="center">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/cjHAFG_Ik7k" frameborder="0" allowfullscreen></iframe>
  </p>
</div>
<div align="center" class="style25">
  <p>NEW to da BRET EASTON ELLIS AGNE<br />
     <br />
  </p>
</div>
</body>
</html>
 
#Layer1, #Layer4 und #Layer7 benötigen noch die Angabe zur Positionierungsart position:relative, damit deren Schichtpositionierung mit z-index funktioniert.
 
Zuletzt bearbeitet:
Hi spicelab,
super! Vielen vielen dank!

Das sieht jetzt schon richtig gut aus. Ich hab jetzt nur Schwierigkeiten mit den #Layern2 und #6 mit ihrer Position bekommen:

#Layer2 z.B. hat jetzt die position left:-470px von mir bekommen, damit er bei mir im browser wieder an der gleichen stelle wie vorher steht. Ich befürchte das führt zu Verschiebungen auf anderen Auflösungen, etc., oder?

Code sieht jetzt so aus:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
	position:relative;
	width:300px;
	height:115px;
	z-index:4;
	margin: 25px auto 0;
}
.style10 {font-size: 16px}
.style2 {font-size: 24px}
#Layer2 {
	position:absolute;
	width:162px;
	height:334px;
	z-index:1;
	left: -470px;
	top: 106px;
	visibility: visible;
}
.style14 {font-size: 20px}
body {
	background-color: #FFFF33;
}
#Layer3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
	left: 6px;
	top: 14px;
}
#Layer4 {
	position:relative;
	width:775px;
	height:2515px;
	z-index:2;
	margin-top: 65px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#Layer5 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 179px;
	top: 102px;
	background-color: #FFFFFF;
}
.style23 {font-size: 30px}
.style24 {font-size: 17px; }
.style25 {font-size: 14px}
.style28 {font-size: 19pt; color: #000099; }
#Layer6 {
	position:absolute;
	width:117px;
	height:112px;
	z-index:6;
	right: -83px;
	top: -180px;
	visibility: visible;
	left: 90%;
}
.style29 {font-size: 23px}
#Layer7 {
	
	width:200px;
	height:115px;
	z-index:1;
	margin-top: 65px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color: #FFFFFF;
}
#Layer8 {
	position:absolute;
	width:96%;
	height:600px;
	z-index:1;
	left: 0px;
	top: 12px;
	background-color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div id="Layer1">
   <div align="center"><span class="style2"><span class="style23">Round n+1</span><br />
     <span class="style14">immer in Essen, mit Freunden</span> </span><br />
  </div>
  <div id="Layer2">
    <p>info<em> </em><span class="style28"><em>N</em>ew Bretagne</span><br />
<span class="style25"><br />
  das sind: Phillip Aumann, <br />
  Nico Burger, Frieder Haller,  Susanne Hefti, Anna-Lisa H&ouml;gler,  Dagobert J&auml;ger, Tom Marriott, Fabian Preuschoff,  Phung-Tien Phan, David R&ouml;der,  Alexander Sch&ouml;pfel, Jakob Schreier, Lara Steineman  und Niklas Taleb</span></p>
  </div>
    <div align="center"><span class="style10"><a href="newbretagne@gmail.com">Kontakt</a></span></div>
</div>
<div id="Layer8"></div>
<div id="Layer4">
  <blockquote>
      <p class="style29">Round&quot;ZWEI&quot; DAGOBERT + Okin Cznupolowsky&amp;Aber Jakob<br />
        01. Februar 2013<br />
        Rellinghauser Str. 269, Essen(45136)</p>
      <div id="Layer6"><img src="http://www.tutorials.de/Webseite /Bildschirmfoto 2012-12-19 um 22.09.39150px.jpg" width="110" height="106" /></div>
      <p class="style24">Sehr geehrte Damen und Herren!</p>
      <p class="style24">zum neuen Jahr erm&ouml;glicht NEW BRETAGNE ENTERTAINMENT Ihnen f&uuml;r ROUND 2 unserer Ausstellungs- und Veranstaltungsreihe ein musikalisches Abendprogramm der besonders Extraklasse! In noch nie dagewesener Konstellation betreten 3 K&uuml;nstler aus Berlin und M&uuml;nchen die selten betretene B&uuml;hne des ehemaligen &quot;Funny People&quot; in Essen.</p>
      <p class="style24">Wir haben die gro&szlig;e Freude ein Konzert von S&auml;nger DAGOBERT (Berge/Berlin) ank&uuml;ndigen zu d&uuml;rfen. Das Vorprogramm bildet das mit ebenso gro&szlig;er Spannung erwartete Musiker-Entertainer-Duo Okin Cznupolowsky &amp; Aber Jakob (M&Uuml;NCHEN)</p>
      <p><span class="style24">Wir laden Sie herzlich ein sich am 01.02.2013 um 20 Uhr in der Rellinghauser Str. 269 in Essen(45136) einzufinden um an diesem Event teilzunehmen!<br />
      </span><br />
    </p>
      <p class="style25">Kosteproben und weiter Information: </p>
  </blockquote>
  <p align="center"><iframe width="560" height="315" src="http://www.youtube.com/embed/boymXRQV92w" frameborder="0" allowfullscreen></iframe>
  </p>
  <blockquote>
      <p><span class="style25">Dagobert<br />  
        <a href="http://www.facebook.com/DagobertOfficial?ref=ts&amp;fref=ts">http://www.facebook.com/DagobertOfficial?ref=ts&amp;fref=ts</a><br />
      Okin Cznupolowsky&amp;Aber Jakob <br />
        <a href="http://serbischerstudent.de/">http://serbischerstudent.de/</a><br />
        <a href="http://www.facebook.com/cznupolowsky?ref=ts&amp;fref=ts">http://www.facebook.com/cznupolowsky?ref=ts&amp;fref=ts</a></span><br />
      </p>
    <p><br />
    </p>
    <p>&nbsp;</p>
    <p><span class="style29">ROUND1 Keine Tricks<br />
      29. November &ndash; 09. Dezember 2012 <br />
      Steeler Str. 112, Essen(45139) </span><br />
      <span class="style24"><br />
      Auftakt der Ausstellungs- und Veranstaltungsreihe mit 10 jungen K&uuml;nstlerInnen aus Essen(45139),                                                                      Osten(Leipzig) und &Uuml;bersee(London).                                                                      Trotz Folkwangtypischem Fokus auf Fotografie werden Sie es auch mit &auml;lteren Medien wie Zeichnung                                                                      oder einfach nur Licht zu tun bekommen. Auch:Video.                                                                      Wir ersparen uns und Ihnen die Beschr&auml;nkungen, die ein streng abgestecktes Thema mit sich bringt.                                                                      Stattdessen. Mut zum Mut. Was kann das (fotografische)Bild noch leisten?                                                                      No Topographics? Erstmal leisten, dann weitersehen.                                                                                                                                                     <br />
      Mit: Phillip Aumann, Frieder Haller, Susanne Hefti, Anna-Lisa H&ouml;gler, Tom Marriott, Fabian Preuschoff,                                                                      Phung-Tien Phan, David R&ouml;der, Alexander Sch&ouml;pfel, Lara Steineman und Niklas Taleb </span></p>
    <p class="style25">Einiges von uns<br />
      <a href="http://newbretagne.de/publikFERTIG1.pdf">Round 1 Keine Tricks Publikation 1</a></p>
  </blockquote>
  <p><img src="http://www.tutorials.de/Webseite /_MG_4454.jpg" width="376" height="253" /><img src="http://www.tutorials.de/Webseite /kunst1.jpg" width="397" height="243" /><img src="http://www.tutorials.de/Webseite /_MG_4347 400px.jpg" width="391" height="260" /><img src="http://www.tutorials.de/Webseite /_MG_4361.jpg" width="384" height="255" /><img src="http://www.tutorials.de/Webseite /_MG_4497 400px.jpg" width="369" height="251" /><img src="http://www.tutorials.de/Webseite /_MG_4489.jpg" width="405" height="280" /></p>
  <p>&nbsp;</p>
  <p align="center">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/cjHAFG_Ik7k" frameborder="0" allowfullscreen></iframe>
  </p>
</div>
<div align="center" class="style25">
  <p>NEW to da BRET EASTON ELLIS AGNE<br />
     <br />
  </p>
</div>
</body>
</html>
 
Hi,
eigentlich sollte es da nicht zu irgendwelchen Verschiebungen kommen. Aber das kannst du ja ganz einfach selbst ausprobieren, indem du deine eigene Auflösung mal änderst. Falls es dann wirklich zu Verschiebungen kommt oder du noch weitere Probleme mit der Positionierung hast, melde dich nochmal.
 
Hi MarcoPaulini,

danke für die Antwort. Ich habe es schon via Handy und "http://quirktools.com/screenfly/" ausprobiert und es kommt zu Verschiebungen.

#Layer2 z.B. hätte ich ja gerne einfach ca. 15px vom linken äußeren Rand aus (px oder % wäre beides ok; es muss nicht ganz exakt sein).
Da kommt aber leider etwas ganz anderes raus; an die gewünschte Stelle (knapp rechts neben dem linken äußeren Rand) komme ich bei meiner Auflösung (1280x800) nur mit der Einstellung -470px (siehe oben).

Bei kleineren Auflösungen wird der Layer dann aber abgeschnitten und bei größeren liegt er wiederum viel weiter in der Mitte.
 
Ok, kannst du vielleicht mal einen Screenshot posten?
Wenn du ein Layer 15px linken Rand entfernt haben möchtest, sollte das mit left: 15px; funktionieren.
 
Also #Layer2 left: 15px

Alle Layercodes:
Code:
<style type="text/css">
<!--
#Layer1 {
	position:relative;
	width:300px;
	height:115px;
	z-index:4;
	margin: 25px auto 0;
}
.style10 {font-size: 16px}
.style2 {font-size: 24px}
#Layer2 {
	position:absolute;
	width:162px;
	height:334px;
	z-index:1;
	left: 15px;
	top: 106px;
	visibility: visible;
}
.style14 {font-size: 20px}
body {
	background-color: #FFFF33;
}
#Layer3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
	left: 6px;
	top: 14px;
}
#Layer4 {
	position:relative;
	width:775px;
	height:3155px;
	z-index:2;
	margin-top: 65px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#Layer5 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 179px;
	top: 102px;
	background-color: #FFFFFF;
}
.style23 {font-size: 30px}
.style24 {font-size: 17px; }
.style25 {font-size: 14px}
.style28 {font-size: 19pt; color: #000099; }
#Layer6 {
	position:absolute;
	width:117px;
	height:112px;
	z-index:6;
	right: -83px;
	top: -175px;
	visibility: visible;
	left: 98%;
}
.style29 {font-size: 23px}
#Layer7 {
	
	width:200px;
	height:115px;
	z-index:1;
	margin-top: 65px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color: #FFFFFF;
}
#Layer8 {
	position:absolute;
	width:97%;
	height:600px;
	z-index:1;
	left: 0px;
	top: 9px;
	background-color: #FFFFFF;
}
.style30 {font-size: 12px; }
-->
</style>
</head>

Und so sieht es jetzt aus:
#Layer2 liegt da jetzt relativ mittig über dem Bild..
 

Anhänge

  • Bild 11.jpg
    Bild 11.jpg
    217,5 KB · Aufrufe: 10
Die Positionsangaben für #Layer2 beziehen sich auf die Boxengrenzen des Elternelements #Layer1, weshalb auch zunächst mit einem negativen left-Wert operiert wurde, um das Element an den linken Fensterrand zu bewegen ;)

Mein Vorschlag:

CSS:
#Layer1 {
    ...
    width:755px; /* editiert, in Anlehnung von #Layer4 */
   ...   
    padding:0 162px; /* ergänzt */
}
#Layer2 {
    ...
    left: 0; /* editiert */
   ...
}
 
Hi spicelab,

danke für den Tip!

Das ist auf jeden fall schon besser; aber den #Layer2 von irgendwelchen Elternelementen zu emanzipieren und einfach grundsätzlich am linken Rand auszurichten geht nicht?

So wird es ja doch immer gleich neben dem mittleren Element (#Layer4) anfangen

Bei meiner Auflösung jetzt so:
 

Anhänge

  • Bild 12.jpg
    Bild 12.jpg
    229,8 KB · Aufrufe: 9

Neue Beiträge

Zurück