[martine]

Ursprungligen postat av Chidori

bör den inte med andra ord lägga sig som en vanlig div fast flytandes på de andra?

Nej, ett positionerat element beter sig annorlunda än vanliga divvar. En vanlig div tar exempelvis upp så bred yta som är möjligt utan att gå utöver det element som det befinner sig i - en positionerad div däremot tar endast upp så stor bredd som innehållet kräver (liknande en floatad div).

Det finns ett antal olika typer av visning/beteende:

1. block-element (beter sig som en div)
2. inline-element (beter sig som span)
3. ersatta (replaced) element, t.ex. img och input
4. positionerade element
5. flytande (floated) element
6. inline-block-element (beter sig som inline-element men har en "box" som block-element)
7. tabell-element

Alla dessa typer beter sig i alla fall i någon mån annorlunda och vill man få verklig kontroll sin html/css så kan det löna sig att lära sig skillnaderna.

För positionerade element gäller det framförallt att tänka på i vilken kontext den befinner sig, dvs i förhållande (relativt) till vilket element (med hjälp av position: relative) sätts koordinaterna (top/left/right/bottom). En positionerad div "flyter" inte på något utan bildar en ny positioneringskontext som är lösgjord/avlägsnad från sin urspungliga plats.

[Chidori]

Ok tack för tipsen, lyckades lösa det MEN inte helt

Jag gjorde "write an online review and..." till en relativ div och satte in popup rutan in i den och satte left till 0 och top till 25. Men varför skapas det nu ett mellanrum mellan de 2 divarna "See all.." och "write an..."?

<div class="grayback" id="reviewsdiv8">
<p class="lh20"><a href="#">See all 56 customer reviews...</a></p>
</div>
<div class="grayback" id="reviewsdiv9">
<p class="lh20"><a href="#">Write an online review and share your thoughts with other customers.</a></p>
<!-- Hidden div -->

--

#reviewsdiv7, #reviewsdiv8, #reviewsdiv9{
	border-right:#7F7F7F 1px solid; 
	border-left:#7F7F7F 1px solid; 
	border-bottom:#7F7F7F 1px solid;
}
#reviewsdiv9{
	position:relative;
}

Edit:
Jag löste det genom att definiera höjden på diven.

[HMH]

Originally posted by Syke@Feb 13 2009, 21:34
Kan inte riktigt förklara varför IE gör så. Men det är pga att bilder är inline-element, och internet explorer lägger av någon outgrundlig anledning till ett mellanrum under den raden som innehåller inline-elementet.

Anledningen är inte så outgrundlig som man kan tro.
Det är helt enkelt så att IE "alignar" bilden till baslinjen på texten, dvs det görs plats för g,j,p,q,y osv. (Texten är ju i detta fall obefintlig, men som jag förstår det så tycker Explorer ofta om att skapa textnoder av blanksteg.)
En annan lösning utöver display:block är således att bottenjustera bilden:

img { vertical-align: bottom; }

Kan inte säkert säga om det stämmer, men jag misstänker att problemet inte skulle uppstå om man tog bort alla blanksteg/radbryt mellan taggarna i den div som innehåller r_shadow.jpg...?