Problem med positionering

HTML & CSS

10 svar · 538 visningar · startad av Troxy 28 jan. 2006

TroxyMedlem sedan mars 20041 505 inlägg

Frågan28 jan. 2006 14:27#1

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?

InsiderMedlem sedan jan. 2000978 inlägg

28 jan. 2006 14:37#2

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.

TroxyMedlem sedan mars 20041 505 inlägg

28 jan. 2006 14:42#3

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?

InsiderMedlem sedan jan. 2000978 inlägg

28 jan. 2006 15:00#4

Gjorde du så här?

#container {position:relative;}
#div1 {position:absolute; top: 20px; left: 40px;}

Vad funkar inte?

TroxyMedlem sedan mars 20041 505 inlägg

28 jan. 2006 16:21#5

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...

tantenMedlem sedan nov. 20051 596 inlägg

28 jan. 2006 17:53#6

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>

TroxyMedlem sedan mars 20041 505 inlägg

28 jan. 2006 19:05#7

Det blir nog lättare om jag postar länken till allting:
http:// (länk är nu borttagen)
Det är en karta till ett bokningssystem.
Jag vill helt enkelt kunna flytta runt alla tabellerna med platser som ligger inuti <div id="map">.

InsiderMedlem sedan jan. 2000978 inlägg

28 jan. 2006 20:25#8

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.

TroxyMedlem sedan mars 20041 505 inlägg

28 jan. 2006 21:11#9

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.

InsiderMedlem sedan jan. 2000978 inlägg

28 jan. 2006 22:21#10

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.

stephanMedlem sedan feb. 2006117 inlägg

9 feb. 2006 15:21#11

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