Свойство "position" в CSS

[Ktina]

С 15 числа этого месяца, после и вследствие получения мощной психподдержки вот в этой теме, потихоньку пытаюсь овладеть основами веб-дизайна, не без помощи обучающего сайта https://www.freecodecamp.org/, там буквально за ручку ведут.

Тем не менее, пока что мне многое непонятно. Например, чем отличаются друг от друга relative, absolute и fixed position? С английским проблем практически нет (уже 27 лет живу в Израиле), и когда читаю объяснения, то вроде бы всё понимаю. Удалось также выполнить и соответствующие задания на том самом обучающем сайте. Однако всё равно меня не покидает ощущение, что до конца не понимаю эту тему.

Хотелось бы получить такое объяснение, после которого всё стало бы на свои места.
Заранее спасибо!

[Geen]

https://developer.mozilla.org/en-US/doc ... S/position

[rockclimber]

Ktina в сообщении #1322052 писал(а):

Например, чем отличаются друг от друга relative, absolute и fixed position?

А как вам тогда удалось выполнить тестовые задания? Или задание было "создайте элемент со свойством position: relative?
Чтобы лучше прочувствовать разницу, сделайте страницу с большим количеством элементов, которые не умещаются на экран. А потом создайте еще один элемент, и у него меняйте свойство position. Если кратко, то значения fixed и absolute нужны, чтобы прибить элемент гвоздями к одному месту, и чтобы другие элементы на него не влияли.

А если что-то непонятно, нужно уточнить, что именно.

[gevaraweb]

Представьте, что вы хотите сделать форму для вычисления определителя. Нужно четыре инпута расположить внутри родителя, как на рисунке.



Тогда родитель - сине-зеленый блок - будет иметь свойство position: relative;
А инпуты - будут иметь свойство position: absolute; Уточняется также их позиция:
Первый инпут - style="top:20px; left:20px;"
Второй инпут - style="top:20px; left:90px;"
и т.д.
Может проблема как у меня - мне раньше казалось, что названия должны быть с точностью до наоборот. Потом привык.

[rockclimber]

gevaraweb
Простите, но нет. Чтобы расположить элементы как у вас, можно, конечно, использовать свойство "position: absolute;", но это будет примерно как молотком шурупы забивать, а отверткой гвзоди закручивать.
Чтобы расположить четыре инпута как у вас на рисунке, достаточно просто взять четыре инпута: https://codepen.io/anon/pen/vrrdYM
Там же в примере есть малиновый блок с классом abs, у которого стоит свойство "position: absolute;". Поменяйте его на "position: relative;" и увидите, для чего на самом деле это свойство.

[arseniiv]

Да, в вебе распространено много сомнительных велосипедов, возникающих из пустой головы и копированием (привет, мой первый рукописный сайт — хотя ситуация с возможностями тогда была немного похуже, чем сейчас, и в том числе текущая версия IE не поддерживала прозрачность PNG). Best practices можно найти лишь в ограниченном числе источников.

[Ktina]

gevaraweb в сообщении #1322077 писал(а):

Может проблема как у меня - мне раньше казалось, что названия должны быть с точностью до наоборот. Потом привык.

Вы озвучили то, что мне было так страшно озвучить. Да, именно этот момент и вызвал у меня затруднения. Кстати, несмотря на трудности в обучении, веб-дизайн показался мне весьма увлекательным занятием. Даже появилась мечта на старости лет стать веб-дизайнером. Не знаю, получится ли, но шуламить попытки делать буду непременно.

[gevaraweb]

rockclimber в сообщении #1322131 писал(а):

Простите, но нет. Чтобы расположить элементы как у вас, можно, конечно, использовать свойство "position: absolute;", но это будет примерно как молотком шурупы забивать, а отверткой гвзоди закручивать.
Чтобы расположить четыре инпута как у вас на рисунке...

Можно, конечно, не спорю. Я просто хотел продемонстрировать возможности позиционирования. Это простой пример, а если мне нужен пример типа

[rockclimber]

gevaraweb в сообщении #1322140 писал(а):

Это простой пример, а если мне нужен пример типа

Во-первых, без проблем, во-вторых, вставляйте не картинки, а ссылки на CSS-песочницы, в-третьих, принципиальная проблема вашего подхода в том, что построенная таким образом страница будет обрезать элементы при уменьшении размеров окна (и вдобавок не будет отображаться скролл, что сделает работу со страницей невозможной при сжатии), в то время как на правильно построенной странице элементы просто сместятся вниз.

-- 23.06.2018, 23:57 --

В общем, пока вы делаете простенькие странички исключительно для себя, хоть на ушах стойте, а если советуете тому, кто учится, то лучше не надо.

[gevaraweb]

rockclimber в сообщении #1322142 писал(а):

Во-первых, без проблем, во-вторых, вставляйте не картинки, а ссылки на CSS-песочницы, в-третьих, принципиальная проблема вашего подхода в том, что построенная таким образом страница будет обрезать элементы при уменьшении размеров окна (и вдобавок не будет отображаться скролл, что сделает работу со страницей невозможной при сжатии), в то время как на правильно построенной странице элементы просто сместятся вниз.

Дык у вас уже был свой пример с песочницей, я и не стал делать...

rockclimber в сообщении #1322142 писал(а):

В общем, пока вы делаете простенькие странички исключительно для себя, хоть на ушах стойте, а если советуете тому, кто учится, то лучше не надо.

Ответ в том же духе: с какого перепуга вы решили, что я собрался таким образом верстать всю страницу? Отдельные элементы на ней - да. Такой подход давно успешно применялся в разных плагинах. Может, это подход устарел. Тогда нужно об этом прямо сказать, а не нести самонадеянную чушь про стояние на ушах.

[kotenok gav]

Ktina в сообщении #1322135 писал(а):

Да, именно этот момент и вызвал у меня затруднения.

И у меня

[Geen]

kotenok gav в сообщении #1322186 писал(а):

Ktina в сообщении #1322135 писал(а):

Да, именно этот момент и вызвал у меня затруднения.

И у меня

Это вы просто ещё недостаточно "прониклись" вопросами позиционирования

[gevaraweb]

arseniiv в сообщении #1322134 писал(а):

Да, в вебе распространено много сомнительных велосипедов, возникающих из пустой головы и копированием (привет, мой первый рукописный сайт — хотя ситуация с возможностями тогда была немного похуже, чем сейчас, и в том числе текущая версия IE не поддерживала прозрачность PNG).

Посмотрел ваш сайт. Странно, упомянутый мной подход используется как минимум в двух местах. Навскидку ясно, что это может быть меню и подвал сайта. И действительно, например, меню:





Априори думается, что этот же подход используется, чтобы построить формулу в mathjax. Ну а как еще?

(Оффтоп)

rockclimber, arseniiv, в следующий раз могу уже и я ошибиться, но в любом случае прошу более уважительно относиться к моему мнению, дабы это не мешало более продуктивному общению и взаимодействию. Спасибо.

[arseniiv]

(Оффтоп)

gevaraweb в сообщении #1322561 писал(а):

Посмотрел ваш сайт. Странно, упомянутый мной подход используется как минимум в двух местах.

Ну это ж не предел мечтаний. Что они там в вордпрессе напилили, мне лишь бы отображалось нормально. Потому что я не увлекаюсь вебдизайном. Если бы увлекался, наверняка бы уже слез с WP.

gevaraweb в сообщении #1322561 писал(а):

Априори думается, что этот же подход используется, чтобы построить формулу в mathjax. Ну а как еще?

Не знаю, переносимость формул на новую строку особо не проверял.

[gevaraweb]

(Оффтоп)

arseniiv в сообщении #1322562 писал(а):

Не знаю, переносимость формул на новую строку особо не проверял.

Нету.



Да оно и не нужно наверно. Представляю студента, который как баран смотрит с телефонного браузера на мой определитель, который размазался в четыре строки.

Ktina в сообщении #1322135 писал(а):

Даже появилась мечта на старости лет стать веб-дизайнером.

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