• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

position: absolute

S

serienjunky

New member
Guten Abend, ich habe ein Problem und hoffe, dass mir hier geholfen werden kann.


Warum positioniert sich der Div-Container „dropdown“ nicht am Div-Container „rechts“ ?
Das Eltern-Element von „dropdown“ ist ja „rechts“!


Code: 
.allgemein {
width: 200px;
}

.links {
width: 100px;
float: left;
}

.rechts {
float: none;
position: relative;
}

.dropdown {
position: absolute;
left:0;
top:0;
width: 100px;
height: 100px;
border: 1px solid black;
}


Code: 
<div class="allgemein">
   <div class="links">Frage:</div>
   <div class="rechts">
      Textfeld
      <div class="dropdown"></div>
   </div>
</div>

mfg serienjunky
 
Hast du sowas im Sinn?
Schreib doch die Klasse .rechts mal so
PHP: 
.rechts {
position: relative;
width: 100px;
margin-left: 100px;
}
 
Du musst dem Element .rechts sagen, wohin es sich stellen soll. Das passiert mit der margin-left-Angabe. Bei der Klasse .dropdown musst Du noch top verändern, damit sie drunter steht, also z.B.
PHP: 
top:20px;

Edit: Es gibt noch andere Möglichkeiten. Du könntest auch .rechts statt mit der margin-Angabe mit
PHP: 
float: right;
positionieren.
 
Zuletzt bearbeitet:
Vielen Dank Anna

Vieleicht noch mal eine Frage nebenbei.

Könnte man dies auch mit einer Tabelle realisieren:

Code: 
<table>
   <tr>
      <td>Frage:</td>
      <td>Textfeld<div id="dropdown"></div></td>
   </tr>
</table>

Nur könnte man das div "dropdown" nicht absolut positionieren. Weil man das <td> nicht als Eltern-Element anschauen kann.
 
Nur als Ergänzung, weil du es offensichtlich nicht gelesen hast:
anna55 schrieb:
@ein schlauer: Eltern spielen eine Rolle:
position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Zum Vergrößern anklicken....
Dort steht, das das Elternelement, absolut positioniert sein muss, ansonsten ist die Position absolut zum body. D.h. in deinem Fall stimmt meine Aussage.

Kann es sein, dass du das DIV im normalen Textfluss haben willst? Dann reicht ein einfaches display:inline oder du verwendest direkt ein inline Element.
 
ein schlauer schrieb:
Nur als Ergänzung, weil du es offensichtlich nicht gelesen hast:
Dort steht, das das Elternelement, absolut positioniert sein muss
Zum Vergrößern anklicken....

Sicher habe ich es gelesen. Und sowieso, habe ich dies schon gewusst.
Ich habe ja geschrieben, dass ich nicht weiss, ob <td> für das div "dropdown" ein Elternelement ist. Ich versteh sowieso nicht, was alles als Elternelement in Frage kommt.

ein schlauer schrieb:
Kann es sein, dass du das DIV im normalen Textfluss haben willst? Dann reicht ein einfaches display:inline oder du verwendest direkt ein inline Element.
Zum Vergrößern anklicken....

Nein, eben nicht! Das Div darf überhaupt nicht im Textfluss sein. Deshalb auch absolute Position. Es sollte nur relativ zum Rand des Div's "rechts" bzw. zur Zelle in der 2. Spalte der Tabelle sein. Vielleicht zur Verständlichkeit; Das div "dropdown" ist versteckt und wird nur bei gewünschten aktionen sichtbar.

Und da das Layout eher an einer Tabelle ran kommt, dachte ich zuerst, dass ich es mit <table> lösen kann:

Code: 
<table>
   <tr>
      <td>Frage1:</td>
      <td>Textfeld1<div id="dropdown1"></div></td>
   </tr>
   <tr>
      <td>Frage2:</td>
      <td>Textfeld2<div id="dropdown2"></div></td>
   </tr>
   <tr>
      <td>Frage3:</td>
      <td>Textfeld3<div id="dropdown3"></div></td>
   </tr>
</table>

Aber leider funktioniert es nicht.
 
ein schlauer schrieb:
Dort steht, das das Elternelement, absolut positioniert sein muss, ansonsten ist die Position absolut zum body.
Zum Vergrößern anklicken....

Nicht wirklich. Die sind etwas sparsam mit ihren Worten und schreiben, das Element muss positioniert sein, also 'position:relative;' geht auch. Bei SELFHTML gibt es das Ganze etwas ausführlicher:
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

Tabellen sind - außerhalb der Datendarstellung - nicht wirklich eine gute Wahl.
Ich hatte - auf Basis Deines ersten Posts mal ne Gegenüberstellung gemacht, kam aber da sofort mit den IEs ins Gehege (wahrscheinlich geht das noch viel einfacher):
PHP: 
<!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" lang="de"> 
<head>
<title>Test</title>
<style type="text/css">
.allgemein {
width: 200px;
}

.links {
width: 100px;
float: left;
}

.rechts {
position: relative;
width: 100px;
margin-left: 100px;
}  

#rechts {
position: relative;
width: 100px;
}  

.dropdown {
position: absolute;
left:0;
top:0;
width: 100px;
height: 100px;
border: 1px solid black;
}

#dropdown {
position: absolute;
top:11px;
display:block;
width: 100px;
height: 100px;
border: 1px solid black;
}

*+html #dropdown {
position: absolute;
top: 0;
left:0;
}

*html #dropdown {
position: absolute;
top: 0;
left:0;
}
</style>
</head>
<body>
<table>
   <tr>
      <td class="links">Frage:</td>
      <td id="rechts">Textfeld<div id="dropdown"></div></td>
   </tr>
</table>

<br />
<br />
<br />
<br />
<br />
<br />
<br />

<div class="allgemein">
   <div class="links">Frage:</div>
   <div class="rechts">
      Textfeld
      <div class="dropdown"></div>
   </div>
</div>
</body>
</html>
 
Na ja, Du kannst auch hier mit position arbeiten, aber was wird einfacher mit ner Tabelle?
PHP: 
<!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" lang="de"> 
<head>
<title>Test</title>
<style type="text/css">
.allgemein {
width: 200px;
}
.links {
width: 100px;
float: left;
}
.rechts {
position: relative;
top:10px;
width: 100px;
}  
.dropdown {
position: relative;
top:-20px;
display:block;
width: 100px;
height: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
   <tr>
      <td class="links">Frage1:</td>
      <td class="rechts">Textfeld1<div class="dropdown"></div></td>
   </tr>
   <tr>
      <td class="links">Frage2:</td>
      <td class="rechts">Textfeld2<div class="dropdown"></div></td>
   </tr>
   <tr>
      <td class="links">Frage3:</td>
      <td class="rechts">Textfeld3<div class="dropdown"></div></td>
   </tr>
</table>
</body>
</html>

Edit: Ich würde im Falle der Tabelle aber eher alles aus dem Style rauswerfen und ungefähr sowas schreiben:
PHP: 
.allgemein {
width: 200px;
}
.links {
width: 100px;
}
.rechts {
width: 100px;
}  
.dropdown {
margin-top:-20px;
width: 100px;
height: 20px;
border: 1px solid black;
}
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben