Absolute & Relative Positioning ?

[Angel]

Здравейте,

Можете ли да ми кажете, защо #insidebox не отива във absolute боха ами седи леко извън него.

[css]
#box {
position:absolute;
top: 100px;
left: 100px;
width: 500px;
height: 500px;
background-color: #999;
}

#insidebox {
position:relative;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color:#F00;
}
[/css]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="default.css" rel="stylesheet" type="text/css" />
<title>CSS</title>
</head>
<body>

<div id="box">
  <div id="insidebox">
  </div>
</div>

</body>
</html>

10х

 

[adrian]

Когато зададеш на даден елемент position: absolute (или relative) в най-общи линии ти му казваш къде да застане спрямо мястото, което би застанал по подразбиране. Защо ти казвам това?

Ами много просто. Махни position: relative; от #insidebox и ще видиш къде нормално би седял този div. А като му зададеш right и bottom по 20px го местиш от нормалното му положение в съответната посока със съответната стойност. Т.е за да не излиза от box-a трябва да му зададеш bottom: 20px; right: 20px;

Предполагам, обаче че не си искал и този #insidebox да ти се намира в горния ляв ъгъл, а по-скоро си искал позицията му да е в долния десен (защото иначе напълно се обезмисля и ползването на какъвто и да е position)

Както забелязваш твоя див седи в горния десен ъгъл, нищо, че си му задал bottom: 0; и right: 0; причината за това е, че трябва да му смениш position-a на absolute, вместо да е relative.

Или понеже никой не обича празни приказки, кодът ти трябва да стане така:

[css]#box {
position:absolute;
top: 100px;
left: 100px;
width: 500px;
height: 500px;
background-color: #999;
}

#insidebox {
position:absolute;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
background-color:#F00;
}[/css]

Като искам само да ти отбележа, че ако нямаш някаква изрична причина да искаш да позоционираш #box абсолютно, тогава е хубаво да го направиш relative.

 

[shterev]

#box -> position:relative;
#insidebox -> position:absolute;

И си готов