3 svar · 368 visningar · startad av learn
Hur gör jag för att lägga en div ovanpå en bild? Detta funkar till viss del:
<img src="bild.jpg" />
<div style="margin-top:20px; background-color:#999">Text</div>
Texten i diven lägger sig ovanpå bilden men inte divens bakgrundsfärg, den syns inte alls (FF)...??? Använder jag position:absolute så lägger sig diven ovanför bilden (Opera). Hur ska jag göra?
Hmm...
Du kan absolutpositionera både bilden och texten t.ex. såhär:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Ett av jarvklos exempel</title>
<style type="text/css">
.bildpuff {
position: relative;
}
.bildpuff img {
position: absolute; z-index: 10;
}
.bildpuff div {
background-color: silver;
position: absolute; z-index: 20;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="bildpuff">
<img src="testbild.gif"/>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed vel neque. Ut eget lectus. Pellentesque at felis nec
urna molestie pulvinar. Sed dui eros, laoreet pharetra,
lobortis a, dictum placerat, enim. Etiam sed lectus. Ut
turpis neque, tristique pretium, faucibus ac, tempor eget,
odio. Integer at pede id justo mattis interdum. Nunc purus
dolor, rhoncus sed, condimentum non, accumsan quis, purus
</div>
</div>
</body>
</html>
Provkör: http://member.webforum.nu/2241/divovanpa.html :bire
Fast det är klart - har du mer innehåll på sidan kan du behöva ha lite bredd och höjd inställt här och var för att den här lösningen skall "leka snällt" förståss :)
Nej - men man kan naturligtvis göra det om man vill eller behöver.
Anger man ingen position i x-y-led hamnar "lagret" på den plats den skulle fått utan positioneringen (dvs koordinaterna blir de det får per automatik), men det "lyfts upp" i z-ordningen och hamnar ovanpå det som "kommer efter" i koden.
Jag förstärkte bara z-ordningen lite i exemplet för att markera att det är den koordinaten som är den viktiga att ändra i det här fallet ;)