2014 dxdy logo

Научный форум dxdy

Математика, Физика, Computer Science, Machine Learning, LaTeX, Механика и Техника, Химия,
Биология и Медицина, Экономика и Финансовая Математика, Гуманитарные науки




Начать новую тему Ответить на тему На страницу Пред.  1, 2
 
 Re: Свойство "position" в CSS
Сообщение26.06.2018, 11:57 
Аватара пользователя


01/12/11
8403
gevaraweb в сообщении #1322576 писал(а):
Ktina в сообщении #1322135 писал(а):
Даже появилась мечта на старости лет стать веб-дизайнером.

Веб-дизайн для женщин и детей - тут :)

Очумительно! Спасибо большое-пребольшое! Тот, кто любит веб-дизайн, - няшка и крутяшка.

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение28.06.2018, 09:59 
Заслуженный участник


06/07/11
5570
кран.набрать.грамота
Давно собирался написать, все руки не доходили. В топике "Смешались в кучу кони, люди" (с), поэтому надо расставить все точки над "ё", чтобы не вводить народ в заблуждение.

Для начала, краткая вводная.
Как браузер размещает элементы. Все элементы бывают двух типов - блочные и строчные. Строчные располагаются браузером в строчку, примерно как слова на письме. Высота строки - высота самого высокого элемента. Если элемент не помещается в строку (слишком широкий), он переносится на следующую. Блочные элементы располагаются по принципу "каждый следующий элемент с новой строки".
Вот пример: https://codepen.io/anon/pen/WyaxzE
У внешних блоков, помеченных как "Block 1" и "Block 2", задана ширина - 400 пикселей. Внутри каждого из них строчные элементы - кнопки. Разной ширины и высоты. В первом блоке вы можете видеть, как браузер выстраивает элементы по умолчанию.
Во втором блоке у одной из кнопок установлено свойство display: block;, что превращает кнопку из строчного элемента в блочный. Это единственная разница между блоками. Видно, как изменилось расположение элементов.

Теперь перейдем к следующему примеру: https://codepen.io/anon/pen/wXYWZr
Там внутрь каждого блока добавлен блок с пометкой "Position" и номером: <div class="pos">Position1</div>, а самих блоков уже четыре. Блоки "Position3" и "Position4" имеют свойство position: absolute;. Это единственное их отличие от блоков "Position1" и "Position2". Как это работает, описано тут: http://htmlbook.ru/css/position
У блока Position 3" родительский блок имеет значение по умолчанию для свойства position (это значение static). В этом случае положение внутреннего блока отсчитывается от края экрана. Родительский элемент блока "Position 4" имеет свойство position: relative;, поэтому положение блока "Position 4" отсчитывается от края родительского элемента. И блок "Position3", и "Position4" заданы внутри своих блоков последними, но их расположение полностью игнорирует наличие других элементов.

Теперь почему плохо делать так, как делает gevaraweb.
Вместо того, чтобы описывать относительное положение элементов, вы можете задать каждому жестко его ширину, высоту и координаты верхней левой точки (свойства Top и Left), и position: absolute; (это то, что я называю "прибить гвоздями").
В этом случае вам придется (в общем случае) точно знать ширину и высоту всех элементов и следить, чтобы они не наползали друг на друга, то есть взять на себя всю ту работу, с которой прекрасно справляется браузер. При этом вам придется заранее знать размеры экрана пользователя или предполагать, что он не меньше какого-то определенного значения. А если размер больше, то справа останется пустое место. А если пользователь изменит размер экрана, то все поползет. А у особо "талантливых" "дизайнеров" еще и полоса прокрутки не отобразится, и часть элементов пользователь не увидит ни при каких обстоятельствах. И это не говоря уже о том, что шрифт тоже будет "приколочен гвоздями", и увеличивать страницу будет проблематично.
Настоящее предназначение свойства - делать меню и прочие элементы, которые должны оставаться в одном месте экрана при скролле.

-- 28.06.2018, 11:01 --

gevaraweb в сообщении #1322561 писал(а):
но в любом случае прошу более уважительно относиться к моему мнению
Это не "мнение". Вопрос был -
Ktina в сообщении #1322052 писал(а):
чем отличаются друг от друга relative, absolute и fixed position?
И для меня очевидно, что вы ответа не знаете.

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение28.06.2018, 23:14 
Аватара пользователя


01/12/11
8403
rockclimber
Пребольшое Вам спасибо за исчерпывающий ответ!
Кстати, уже готовлю следующую тему-вопрос, тоже, разумеется, по веб-дизайну.

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение29.06.2018, 12:22 


15/11/15
465
rockclimber в сообщении #1323083 писал(а):
Настоящее предназначение свойства - делать меню и прочие элементы, которые должны оставаться в одном месте экрана при скролле.

Тут пропущено слово fixed?
rockclimber в сообщении #1323083 писал(а):
И это не говоря уже о том, что шрифт тоже будет "приколочен гвоздями", и увеличивать страницу будет проблематично.
А это что означает, позвольте полюбопытствовать?

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение01.07.2018, 16:53 
Заслуженный участник


06/07/11
5570
кран.набрать.грамота
gevaraweb в сообщении #1323302 писал(а):
rockclimber в сообщении #1323083 писал(а):
Настоящее предназначение свойства - делать меню и прочие элементы, которые должны оставаться в одном месте экрана при скролле.
Тут пропущено слово fixed?
И fixed тоже, но необязательно. Вы же смотрели сайт arseniiv, там не используется это значение (я, по крайней мере, не заметил).

gevaraweb в сообщении #1323302 писал(а):
rockclimber в сообщении #1323083 писал(а):
И это не говоря уже о том, что шрифт тоже будет "приколочен гвоздями", и увеличивать страницу будет проблематично.
А это что означает, позвольте полюбопытствовать?
Если вы задаете ширину жестко в пикселях, ваш элемент не сможет растянуться, если его содержимое увеличится. Значит, вам придется жестко задавать шрифт для каждого элемента. Потому что если этого не сделать, то он сможет увеличиться сам (у браузеров могут быть настройки и доступные шрифты, отличные от ваших). Зайдите в мой второй пример, и добавьте свойство font-size: 300%; к классу block. Увидите все своими глазами.

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение01.07.2018, 18:30 


15/11/15
465
rockclimber в сообщении #1323798 писал(а):
И fixed тоже, но необязательно. Вы же смотрели сайт arseniiv, там не используется это значение (я, по крайней мере, не заметил).

Ага, смотрел. Ну, дык, и не заметил, чтобы какие-то элементы оставались на месте при скролле. И вообще, он уже открестился от своего сайта :D .
rockclimber в сообщении #1323798 писал(а):
Значит, вам придется жестко задавать шрифт для каждого элемента.

Не вижу в этом большой проблемы.

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение12.06.2019, 11:44 


27/05/19

4
Когда применяется свойство position то речь не идет об адаптивности, нужно использовать медиа запросы, я всегда верстаю flexbox

 Профиль  
                  
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 22 ]  На страницу Пред.  1, 2

Модераторы: Toucan, maxal, PAV, Karan, Супермодераторы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group