FAQ |
Kalender |
2008-10-31, 10:37 | #1 | ||
|
|||
Flitig postare
|
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:
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> 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 |
||
Svara med citat |
2008-10-31, 10:43 | #2 | ||
|
|||
Klarade millennium-buggen
|
Visa CSS:en för container. Den får inte vara "position: absolute" vad jag förstår för att det ska funka.
|
||
Svara med citat |
2008-10-31, 10:51 | #3 | ||
|
|||
Flitig postare
|
Citat:
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> |
||
Svara med citat |
2008-10-31, 11:05 | #4 | |||
|
||||
Bara ett inlägg till!
|
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> |
|||
Svara med citat |
2008-10-31, 11:18 | #5 | ||
|
|||
Flitig postare
|
Citat:
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". |
||
Svara med citat |
2008-10-31, 12:59 | #6 | ||
|
|||
Medlem
|
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.
|
||
Svara med citat |
2008-10-31, 14:24 | #7 | ||
|
|||
Flitig postare
|
Citat:
|
||
Svara med citat |
2008-10-31, 20:29 | #8 | |||
|
||||
Medlem
|
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. |
|||
Svara med citat |
Svara |
|
|