Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Теоретический вопрос. (https://javascript.ru/forum/xhtml-html-css/13800-teoreticheskijj-vopros.html)

gods33 14.12.2010 11:44

Теоретический вопрос.
 
Во-первых здравствуйте. Во-вторых прошу прощения если не там создал тему и вообще если такая тема тут не нужна. Я понимаю что существует много литературы по данной тематике, но нигде не нашел ответа на свой вопрос. Вопрос заключается вот в чем. В css расположение блока всегда ведется от верхнего левого угла, или же от расположения предыдущего? Просто добиваться результата путем подбора значений это не совсем тру решение. Ведь куда быстрее будет двигаться дело, если ты понимаешь, что ты пишешь... В принципе я понимаю что пишу, но не могу понять принципов работы. То есть именно то, о чем я спрашиваю. Буду очень признателен если не будете закидывать тухлыми яйцами, а ответите на вопрос. Желательно с пояснением. Заранее благодарен.

ksa 14.12.2010 11:50

Цитата:

Сообщение от gods33
Вопрос заключается вот в чем. В css расположение блока всегда ведется от верхнего левого угла, или же от расположения предыдущего?

Я бы сказал что "расположение блока" (поточного) ведется от верхнего левого угла материнского элемента... Если таковой не находится - оным считается боди.

Kolyaj 14.12.2010 11:52

http://softwaremaniacs.org/blog/category/primer/

ksa 14.12.2010 11:55

Но есть такое свойство ЦСС как позишн. А так же свойства "сателиты"
- топ
- боттом
- лефт
- райт
Все это в совокупности может коренным образом менять "точку отсчёта" при расположении элемента.

Так же и сам элемен не всегда волен находиться где угодно... Например ячейка таблицы.

gods33 14.12.2010 12:10

ksa,
как я понимаю эти сателиты уже располагают элемент относительно сторон. Тоесть если есть некая точка с свойствами
top: 50%;
left: 50%
(центр экрана)
следующие свойства этого же элемента
margin-top: 20px;
margin-left: 30px
будут применяться относительно топа и лефта?

PeaceCoder 14.12.2010 12:46

да. Это хитрость расположения любого блока по центру если известны размеры без JS

ksa 14.12.2010 13:36

Цитата:

Сообщение от gods33
сателиты уже располагают элемент относительно сторон

Но "чего" - это еще нужно уточнять. ;)
Цитата:

Сообщение от gods33
top: 50%;
left: 50%
(центр экрана)

Далеко не всегда... Скажем так - от размеров "определяющего" элемента. :)

Отступы и поля применяются ко всему элементу. А не относительно топа и лефта (как в твоём случае).

Т.е. позишн определит "поточнось" элемента и его "тип" позиционирования. Свойства "сателиты" поставят его в указаное место - все, точка.
"Смещение" элемента отступами и полями это вроде как "особенность", нежели именно "позиционирование"...
Даже если ты и увидишь элемент в нужном тебе месте (после отступов и полей) не факт что "окружающие" элементы будут вести себя как ты бы хотел.
:)

gods33 14.12.2010 15:46

Цитата:

Сообщение от ksa
Скажем так - от размеров "определяющего" элемента.

то есть если есть див. с определенными размерами. скажем например
#logo {
top: 5%;
left: 50%;
width: 100%;
height: 150px;
}

и есть таблица в этом диве
.image {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 60px;
margin-top: -30px;
margin-left: -100px;
}
то свойства таблицы буду применяться относительно дива?

ksa 14.12.2010 16:48

Цитата:

Сообщение от gods33
свойства таблицы буду применяться относительно дива?

Ты не указал позишн у #logo... А это важно. Так же нет полного текста хтмл-разметки... Что так же важно.

Вот пример...

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type='text/css'>
#logo {
	position: absolute;
	top: 5%;
	left: 50%;
	width: 30%;
	height: 150px;
	border: 1px solid;
}
.image {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 60px;
	margin-top: -30px;
	margin-left: -100px;
	border: 1px solid;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='logo'>
	<table class='image'>
	<tr>
		<td>test</td>
	</tr>
	</table>
</div>
</body>
</html>

gods33 14.12.2010 17:29

Так, ну уже что-то стало вырисовываться. Спасибо за разъяснения. Буду задавать вопросы по мере поступления. Ну а пока с этим разобрался. :)


Часовой пояс GMT +3, время: 18:25.