CSS - överlappande bilder

Det löser du med z-index: n;

där n är en siffra. Högre siffra = Bilden kommer högre upp.

Exempel:
bild1 har z-index:1 och bild2 har z-index:2

bild2 kommer att överlappa bild1 för att bild2 har högre z-index värde än bild1.

Du kan också använda absolut positionering.

Den här bilden hamnar 10 pixlar in från sidans topp och 10 pixlar från sidans vänster:

<img src="bild.jpg" alt="Bild" style="position:absolute;top:10px;left:10px" />

Om menybilden hamnar olika beroende på upplösning och så, är det intressant att notera att absolut positionering blir i förhållande till sitt moderelement istället för till hela sidan, om moderelementet är absolut eller relativt (eller fixed?) positionerat. Ex:

<p>Bla.</p>

<div style="position:relative">
  <img src="titelbild.jpg" alt="Titelbild" />
  <img src="ovanpå.jpg" alt="Ovanpå" style="position:absolute;top:10px;left:10px" />
</div>

Bilden ovanpå hamnar här 10,10 från övre vänstra hörnet i DIVen, inte från övre vänstra hörnet på hela sidan.

Om man laddar om http://www.johannaost.com tills man ser polkagrisar i texten "Johanna Öst" (ca 20% av gångerna) så har man ett exempel på just detta - visa för all del källa.

I fall där man kanske inte vill använda absoult postionering går det istället att använda sig av negativ margin. Kan vara bra att veta om då man kanske inte tänker på det med en gång.

Ludvig, kan du utveckla det där? Det låter som nåt jag kanske kan använda.