Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.12.2010, 11:44
Интересующийся
Отправить личное сообщение для gods33 Посмотреть профиль Найти все сообщения от gods33
 
Регистрация: 09.12.2010
Сообщений: 27

Теоретический вопрос.
Во-первых здравствуйте. Во-вторых прошу прощения если не там создал тему и вообще если такая тема тут не нужна. Я понимаю что существует много литературы по данной тематике, но нигде не нашел ответа на свой вопрос. Вопрос заключается вот в чем. В css расположение блока всегда ведется от верхнего левого угла, или же от расположения предыдущего? Просто добиваться результата путем подбора значений это не совсем тру решение. Ведь куда быстрее будет двигаться дело, если ты понимаешь, что ты пишешь... В принципе я понимаю что пишу, но не могу понять принципов работы. То есть именно то, о чем я спрашиваю. Буду очень признателен если не будете закидывать тухлыми яйцами, а ответите на вопрос. Желательно с пояснением. Заранее благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 14.12.2010, 11:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

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

Последний раз редактировалось ksa, 14.12.2010 в 11:52.
Ответить с цитированием
  #3 (permalink)  
Старый 14.12.2010, 11:52
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

http://softwaremaniacs.org/blog/category/primer/
Ответить с цитированием
  #4 (permalink)  
Старый 14.12.2010, 11:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

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

Так же и сам элемен не всегда волен находиться где угодно... Например ячейка таблицы.
Ответить с цитированием
  #5 (permalink)  
Старый 14.12.2010, 12:10
Интересующийся
Отправить личное сообщение для gods33 Посмотреть профиль Найти все сообщения от gods33
 
Регистрация: 09.12.2010
Сообщений: 27

ksa,
как я понимаю эти сателиты уже располагают элемент относительно сторон. Тоесть если есть некая точка с свойствами
top: 50%;
left: 50%
(центр экрана)
следующие свойства этого же элемента
margin-top: 20px;
margin-left: 30px
будут применяться относительно топа и лефта?
Ответить с цитированием
  #6 (permalink)  
Старый 14.12.2010, 12:46
Аватар для PeaceCoder
Профессор
Отправить личное сообщение для PeaceCoder Посмотреть профиль Найти все сообщения от PeaceCoder
 
Регистрация: 15.12.2009
Сообщений: 742

да. Это хитрость расположения любого блока по центру если известны размеры без JS
__________________
Настоящий программист думает и осознает сам решение задачи, а не копирует другие мысли, не осознавая их (c)
Относись к человеку так же, как хотелось бы отношения к себе (с)
Все нужно там, где оно нужно, а все не нужно нигде (с) Gozar
B~Vladi: А кто такой JavaScript стрелок?! micscr: это тот, кто не jQuery танкист.
Программы становятся медленнее быстрее, чем компьютеры становятся быстрее (с) Никлаус Вирт
Ответить с цитированием
  #7 (permalink)  
Старый 14.12.2010, 13:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от gods33
сателиты уже располагают элемент относительно сторон
Но "чего" - это еще нужно уточнять.
Сообщение от gods33
top: 50%;
left: 50%
(центр экрана)
Далеко не всегда... Скажем так - от размеров "определяющего" элемента.

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

Т.е. позишн определит "поточнось" элемента и его "тип" позиционирования. Свойства "сателиты" поставят его в указаное место - все, точка.
"Смещение" элемента отступами и полями это вроде как "особенность", нежели именно "позиционирование"...
Даже если ты и увидишь элемент в нужном тебе месте (после отступов и полей) не факт что "окружающие" элементы будут вести себя как ты бы хотел.
Ответить с цитированием
  #8 (permalink)  
Старый 14.12.2010, 15:46
Интересующийся
Отправить личное сообщение для gods33 Посмотреть профиль Найти все сообщения от gods33
 
Регистрация: 09.12.2010
Сообщений: 27

Сообщение от 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;
}
то свойства таблицы буду применяться относительно дива?

Последний раз редактировалось gods33, 14.12.2010 в 15:53.
Ответить с цитированием
  #9 (permalink)  
Старый 14.12.2010, 16:48
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от 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>
Ответить с цитированием
  #10 (permalink)  
Старый 14.12.2010, 17:29
Интересующийся
Отправить личное сообщение для gods33 Посмотреть профиль Найти все сообщения от gods33
 
Регистрация: 09.12.2010
Сообщений: 27

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос по учебнику Invis1ble Сайт Javascript.ru 12 21.03.2011 20:06
Вопрос о циклических ссылках (JavaScript -> Dom -> JavaScipt) BlueIce Events/DOM/Window 10 17.02.2010 21:58
Вопрос про ООП, цепочки прототипов. Shaci Общие вопросы Javascript 5 27.01.2010 14:50
мааленький вопрос по Regexp:) mirniy Общие вопросы Javascript 1 22.01.2009 20:47
вопрос по long poll megaswin AJAX и COMET 2 27.05.2008 09:20