WN - Absolut position förrvirrande...

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Absolut position förrvirrande... (https://www.wn.se/forum/showthread.php?t=32940)

Enligt vad jag förstår av w3schools.com, så skall ett element med absolut positionera lägga sig relativt till det block den ligger i.

Citat:

An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties

Men, för mig verkar det alltid som om position: absolute; alltid refererar till sidan.

Ex.

Kod:

#box {

        width:200px;

        height:80px;

        position: absolute;

        top: 20px;

        left: 10px;

        z-index:1;

        border:#000000 1px dashed;

        background:#CCCCCC;

}



<div id="container">

        <div id="box">INFO!</div>

</div>

I ovan vill jag alltså att "box" ska ligga 20px från toppen och 10px från vänster i "container".
Men "box" lägger sig 20px från toppen och 10px från vänster i sidan. Oavsett vart "container" befinner sig.

Förklaring, klargörande och hjälp? :)
Tack!

Edit: förvirrande rubrik? :P

Visa CSS:en för container. Den får inte vara "position: absolute" vad jag förstår för att det ska funka.

Citat:

Originally posted by aquastorm@Oct 31 2008, 11:43
Visa CSS:en för container. Den får inte vara "position: absolute" vad jag förstår för att det ska funka.

Så här ser det ut;

Kod:

#site {

        width:900px;

        margin:auto;

}

#header {

        background:url(../image_layout/main_elements.png) 0 0 no-repeat;

        width:900px;

        height:184px;

}

#middle {

        background:url(../image_layout/main_mid.png) repeat-y;

        width:900px;

}

#footer {

        background:url(../image_layout/main_elements.png) 0 -184px no-repeat;

        width:900px;

        height:116px;

}

#navigation {

        float:left;

        margin-left:5px;

        width:160px;

}

#content {

        float:left;

        margin-left:5px;

        width:465px;

        padding-left:5px;

        padding-right:5px;

}

#box {

        width:200px;

        height:80px;

        position: absolute;

        top: 26px;

        left: 0px;

        z-index:1;

        border:#000000 1px dashed;

        background:#CCCCCC;

}

.endFloat{

        clear:both;

}



<div id="site">

<!--HEADER START-->

<div id="header">

<div id="box">INFO!</div>

</div>

<!--HEADER END-->

<!--MID START-->

<div id="middle">

  <!--NAVIGATION START-->

  <div id="navigation">

  Test<br />

  test!<br />

  test!<br />

  </div>

  <!--NAVIGATION END-->

  <!--CONTENT START-->

 <div id="content">

  Test<br />

  test!<br />

  test!<br />

 </div>

  <!--CONTENT END-->

  <div class="endFloat"></div>

</div>

<!--MID END-->

<!--FOOTER START-->

<div id="footer"></div>

<!--FOOTER END-->

</div>

den div:en (egentligen containern) som håller din div som du vill ha position: absolute måste du själv definiera som position: relative.

Exempel:

Kod:

<div style="position: relative;">

 <div style="position: absolute; top: 20px; left: 60px; width: 100px; height: 130px;">

 </div>

</div>

Citat:

Originally posted by coredev@Oct 31 2008, 12:05
den div:en (egentligen containern) som håller din div som du vill ha position: absolute måste du själv definiera som position: relative.
Exempel:

Kod:

div style=position relative; div style=position absolute; top 20px; left 60px; width 100px; height 130px; /div /div

Där hade vi problemet. Konstigt att inte w3 berättar detta? :P
Och man kan undrar för det är på detta viset? Någon som har en bra utläggning till detta så får ni gärna dela med er.

Tack så mycket.

Märkte även med lite eget experimenterade att just detta specifik problem gick att lösa genom att använda position: relative; på "box".

Enkelt. Man måste ha möjlighet att på olika nivåer absolut positionera ett element relativt ett annat. Därmed måste man kunna specificera varifrån den absoluta positionen ska beräknas.

Citat:

Originally posted by dotvoid@Oct 31 2008, 13:59
Enkelt. Man måste ha möjlighet att på olika nivåer absolut positionera ett element relativt ett annat. Därmed måste man kunna specificera varifrån den absoluta positionen ska beräknas.

Tack för svaret.

Här döljer sig browser-inkompabilitet. Eller fel i internet explorer som man också kan och bör kalla det.

W3 nämner faktiskt behovet om att skapa en containing box. Finns en hel sektion om det i någon av CSS specarna, troligtivis CSS 2.1.

Att göra ett element till "position: relative" gör det till en containing box. Alltså kan man ha en div#inner i en div#mid i en div#outer, och göra div#outer till containing box och en position absolute på div#inner blir relativ div#outer.

Förutom i IE(6) då.

IE gör alltid parent-element till containing box. Eller snarare har de nog inte konceptet med containing box. Det bara blir så att om du gör div#inner till position:absolute så kommer det vara relativt div#mid. Du kan inte komma runt det.

IE har ju sin magiska "hasLayout" som visar att den layoutmotorn inte har något med CSS att göra. Det är bara något gammalt hack som de kastade ihop för ett decennium sedan för att komma ikapp på webben.

Förlåt, men jag blir bitter ibland, inte lika mycket nu längre dock. Sitter en bit bort från webbutveckling nu.