10 svar · 536 visningar · startad av Troxy
Hej!
Med position: absolute; kan man ju positionera element var som helst i webbläsarfönstret.
Men är det möjligt att aboslut positionera ett element inuti ett annat element? Svårt att förklara...
Men säg att jag exempelvis har några divs såhär:
<div id="container">
<div id="div1">Div nummer ett</div>
<div id="div2">Div nummer två</div>
</div>
Nu vill jag att div1 ska befinna sig top: 20px; left: 40px; i förhållande till sin förälder, dvs container. Är det möjligt?
Om du anger position:relative för din container kommer dess barn positioneras i förhållande till den (när de är absolutpositionerade), och inte till body eller html.
Jaa, just det! Men det fungerar delvis ser jag nu. Eftersom ett element som är relativt positionerat fortfarande tar upp plats, så blir det inte helt rätt. Jag vill kunna ange exakta kordinater...
Det är väl bara inse att det inte är möjligt, eller?
Gjorde du så här?
#container {position:relative;}
#div1 {position:absolute; top: 20px; left: 40px;}
Vad funkar inte?
Om jag vill placera ut fler divar så blir kordinaterna fel, eftersom divarna fortfarande tar upp plats och endast flyttas i förhållande till sin position i dokument-flödet.
Kan man på något sätt ta bort ett element ur dokumentflödet? Float fungerade inte tyvärr...
Lekte med den här en stund för jag förstod inte din fråga om vad det var som tog plats. Var tvungen att kolla :OO
Flyttade även ut en div ur conteinern, fast den ligger i den i koden.
Är det något annat du gör med dina andra divar?
Oftast är det lättare att se problemet om man får mer kod... Kanske missförstår jag dig.
Men testa den 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" xml:lang="sv" lang="sv">
<html>
<head>
<title>Absolute</title>
<style type="text/css">
<!--
#container{
margin: 100px;
background-color: #0ff;
width: 200px;
height: 300px;
position: absolute;
}
#div1{
position: absolute;
left: 30px;
top: 40px;
height: 38px;
width: 50px;
background-color: #00f;
}
#div2{
position: absolute;
left: 90px;
top: 70px;
height: 38px;
width: 70px;
background-color: #f0f;
}
#div3{
position: absolute;
left: 50px;
top: 60px;
height: 78px;
width: 10px;
background-color: #ffa500;
}
#div4{
position: absolute;
left: 350px;
top: -60px;
height: 78px;
width: 20px;
background-color: #0f0;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="div1">Div nr ett</div>
<div id="div2">Div nr två</div>
<div id="div3">Div nr tre</div>
<div id="div4">Div nr fyra</div>
</div>
</body>
</html>
Troxy skrev:
Om jag vill placera ut fler divar så blir kordinaterna fel, eftersom divarna fortfarande tar upp plats och endast flyttas i förhållande till sin position i dokument-flödet.
Kan man på något sätt ta bort ett element ur dokumentflödet? Float fungerade inte tyvärr...
Tror tyvärr inte du var med på hur jag menade...
Du ska använda position:absolute;. Då tas dina element bort ur dokumentflödet och du kan placera ut dom precis där du vill ha dom, inom din container.
Men för att avstånden ska vara i förhållande till ytterkanten av din div#map, måste du sätta #map {position:relative;}
Jag testade själv på din sida och det funkade att placera ut sektionerna.
Insider, JAAA! Tack tack tack! Nu är allting helt perfekt! :birp :birp
Jag som trodde jag blev tvungen att hitta en helt ny lösning, men icke.
Här är en sida som förklarar hela teorin med positionering.
http://www.autisticcuckoo.net/arkiv.php?id=2004/12/07/relativt-absolut
Läs speciellt under rubriken Absolut positionering.
Där nämns bl a att man kan göra på det sätt jag förklarade för dig.
www.autisticcuckoo.net skrev:
Genom att ange position:relative för ett element, utan att flytta
det, kan vi alltså etablera en ny kontext för dess absolut positionerade barn.
Tack Insider!
Sprang på den här tråden av en slump. Hade fått för mig att det inte gick att göra så här, men tydligen så går det ju alldeles utmärkt!
Detta kommer lösa en del problem i framtiden :D