jul 20 2007 7 How to put two pictures on top of eachother in css. I want them to be in the exact same spot. That should be easy, right?Dela detta:Klicka för att dela på Twitter (Öppnas i ett nytt fönster)Klicka för att dela på Facebook (Öppnas i ett nytt fönster)Relaterade InläggsnavigeringFöregående inläggFöregående Internet Exploder can’t handle a simple .pngNästa inläggNästa Where am I?
Det gör du lättast med absolut positionering. Till exempel genom att skapa en klass som du lägger på båda bilderna, något i stil med:
.imagelayer {
position:absolute;
top:100px;
left:20px;
}
Men av rena principskäl använder jag aldrig absolut positionering. Om jag vill lägga två bilder ovanpå varandra så låter jag den ena bilden vara bakgrundsbild i en div och den andra vara en vanlig bild i HTML-koden. Det är lite krångligare, men mycket mer flexibelt.
Yup.
Use z-index and absolute position.
Absolut funkar ju inte iom att bilderna ska hamna på olika ställen på sidan beroende på en massa annat. Varför finns inget absolut gentemot en box?
Att lägga den bakre bilden som bakgrund funkar inte heller då jag hämtar den som ska vara bakerst från en databas…
Nu har jag löst det så att jag lägger bilderna i en tabell (för det funkar så bra för ändamålet), så sätter jag bredden på td’n till ett fast värde, och så kan jag flytta upp bild nr två för jag vet hur många pixlar fel den kommer hamna. *phu*
Skulle inte använt en tabell om jag kommit på något sätt att få divboxar att bara lägga sig bredvid varandra i en annan divbox (och alltså bara fått overflow på bredden). Men de ville lägga sig under varandra hela tiden…
Nu låter det som att jag gör jättekonstiga saker, eller hur? =)
Pythas: since the position of the images isn’t absolute on the page, that is not a very good idea. Now, if there was absolute positioning relative to another object… THAT would work really well!
Positionering i förhållande till ett tidigare objekt är lika med float. Float är inte absolut, men kan ändå göras pixelperfekt om du definierar storleken på objekten. Allt har sin plats i floaten, och det du gör med en tabell nu kan du lika väl göra med minusmarginaler utan att behöva använda onödig (och för ändamålet felaktig) kod.
Eller så kan du göra som jag skrev tidigare, en bild i HTML och en som CSS-bakgrund, en snygg och enkel lösning för det mesta. Eller allra enklast: genom att göra jobbat i en bildeditor istället för i koden. 🙂
Båda de senare är bra förslag, men funkar inte för det jag gör! =)
Bara vänta och se. När jag svurit färdigt och fått till allt så kommer jag vara mindre skakig på css, och anledningen till mina svordomar kommer bli uppenbar…
Jag ska undersöka om float är det jag letade efter hela tiden! Jag löste gårdagens problem med float även om jag protesterade hela vägen, för jag tyckte att lösningen var fel… fast den funkar… =)