Форум

gods33 · #1 (**permalink**) 14.12.2010, 11:44

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

ksa · #2 (**permalink**) 14.12.2010, 11:50

Сообщение от gods33

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

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

Kolyaj · #3 (**permalink**) 14.12.2010, 11:52

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

ksa · #4 (**permalink**) 14.12.2010, 11:55

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

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

gods33 · #5 (**permalink**) 14.12.2010, 12:10

ksa,
как я понимаю эти сателиты уже располагают элемент относительно сторон. Тоесть если есть некая точка с свойствами

top: 50%;
left: 50%

(центр экрана)
следующие свойства этого же элемента

margin-top: 20px;
margin-left: 30px

будут применяться относительно топа и лефта?

PeaceCoder · #6 (**permalink**) 14.12.2010, 12:46

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

ksa · #7 (**permalink**) 14.12.2010, 13:36

Сообщение от gods33

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

Но "чего" - это еще нужно уточнять.

Сообщение от gods33

top: 50%;
left: 50%

(центр экрана)

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

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

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

gods33 · #8 (**permalink**) 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 · #9 (**permalink**) 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 · #10 (**permalink**) 14.12.2010, 17:29

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

Форум

Справочник

Discord чат

Курсы javascript