Позициониране на див спрямо друг див

[Sunrize]

Значи имам примерно един див с няква абсолютна позиция и имам друг див, който е в 1вия див и също има абсолютна позиция .. Как става позиционирането на 2рия див спрямо първия.

 

[emagi]

Става с :

margin

 

[emagi]

Разгледай следващият пример:

<!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" />
<title>Untitled Document</title>
<style type="text/css">
#main {
position:absolute;
width:400px;
height:400px;
border:solid 1px red;
}
#second {
width:200px;
height:200px;
border:solid 1px blue;
margin-top:80px;
margin-left:40px;
position:absolute;
}
</style>
</head>

<body>
<div id="main">
<div id="second">
</div>
</div>
</body>
</html>

Промени стойностите на margin-ите(в червено) и виж как се променя позицията на вложеният див спрямо родителският

 

[Sunrize]

ами става ама .. под IE и firefox се вижда доста различно :?
няма ли друг начин ? или как да позиционирам таблица спрямо див ?

 

[emagi]

По принцип огато се ползва margin, има случаи(както при теб) да има различия в различните броузъри.МОже да пробваш с padding, но се получава едно "раздуване".Трябва колкото padding зададеш,толкова пиксели да вадиш съоветно ->ширина или височина

<!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" />
<title>Untitled Document</title>
<style type="text/css">
#main {
position:absolute;
width:400px;
height:400px;
border:solid 1px red;
padding-top:40px;
padding-left:40px;
}
#second {
width:200px;
height:200px;
border:solid 1px blue;
}
</style>
</head>

<body>
<div id="main">
<div id="second">
</div>
</div>
</body>
</html>

 

[shterev]

сега правиш див1 да е position:relative; настройваш го с флоатинг къде да си стои( то зависи много къде се намира и как е структурирано), после на див 2 position:absolute; left:20px; top:20px; тези лефт и топ са примерни, няма да има грешка така.Проблема тук е че не знам къде и как искаш да е див 1