2014 dxdy logo

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

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




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


01/12/11

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

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

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

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение23.06.2018, 18:09 
Заслуженный участник
Аватара пользователя


01/09/13
3013
https://developer.mozilla.org/en-US/doc ... S/position

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


06/07/11
5604
кран.набрать.грамота
Ktina в сообщении #1322052 писал(а):
Например, чем отличаются друг от друга relative, absolute и fixed position?
А как вам тогда удалось выполнить тестовые задания? Или задание было "создайте элемент со свойством position: relative? :mrgreen:
Чтобы лучше прочувствовать разницу, сделайте страницу с большим количеством элементов, которые не умещаются на экран. А потом создайте еще один элемент, и у него меняйте свойство position. Если кратко, то значения fixed и absolute нужны, чтобы прибить элемент гвоздями к одному месту, и чтобы другие элементы на него не влияли.

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

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение23.06.2018, 19:06 


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

Изображение

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

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


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

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение23.06.2018, 22:04 
Заслуженный участник
Аватара пользователя


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

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


01/12/11

8634
gevaraweb в сообщении #1322077 писал(а):
Может проблема как у меня - мне раньше казалось, что названия должны быть с точностью до наоборот. Потом привык.

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

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


15/11/15
644
rockclimber в сообщении #1322131 писал(а):
Простите, но нет. Чтобы расположить элементы как у вас, можно, конечно, использовать свойство "position: absolute;", но это будет примерно как молотком шурупы забивать, а отверткой гвзоди закручивать.
Чтобы расположить четыре инпута как у вас на рисунке...

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

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


06/07/11
5604
кран.набрать.грамота
gevaraweb в сообщении #1322140 писал(а):
Это простой пример, а если мне нужен пример типа
Во-первых, без проблем, во-вторых, вставляйте не картинки, а ссылки на CSS-песочницы, в-третьих, принципиальная проблема вашего подхода в том, что построенная таким образом страница будет обрезать элементы при уменьшении размеров окна (и вдобавок не будет отображаться скролл, что сделает работу со страницей невозможной при сжатии), в то время как на правильно построенной странице элементы просто сместятся вниз.

-- 23.06.2018, 23:57 --

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

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение23.06.2018, 23:56 


15/11/15
644
rockclimber в сообщении #1322142 писал(а):
Во-первых, без проблем, во-вторых, вставляйте не картинки, а ссылки на CSS-песочницы, в-третьих, принципиальная проблема вашего подхода в том, что построенная таким образом страница будет обрезать элементы при уменьшении размеров окна (и вдобавок не будет отображаться скролл, что сделает работу со страницей невозможной при сжатии), в то время как на правильно построенной странице элементы просто сместятся вниз.

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

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

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

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение24.06.2018, 06:33 


21/05/16
3939
Аделаида
Ktina в сообщении #1322135 писал(а):
Да, именно этот момент и вызвал у меня затруднения.

И у меня :-)

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение24.06.2018, 14:32 
Заслуженный участник
Аватара пользователя


01/09/13
3013
kotenok gav в сообщении #1322186 писал(а):
Ktina в сообщении #1322135 писал(а):
Да, именно этот момент и вызвал у меня затруднения.

И у меня :-)

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

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


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

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

Изображение

Изображение

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

(Оффтоп)

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

 Профиль  
                  
 
 Re: Свойство "position" в CSS
Сообщение25.06.2018, 22:37 
Заслуженный участник
Аватара пользователя


27/04/09
28075

(Оффтоп)

gevaraweb в сообщении #1322561 писал(а):
Посмотрел ваш сайт. Странно, упомянутый мной подход используется как минимум в двух местах.
Ну это ж не предел мечтаний. Что они там в вордпрессе напилили, мне лишь бы отображалось нормально. Потому что я не увлекаюсь вебдизайном. Если бы увлекался, наверняка бы уже слез с WP.

gevaraweb в сообщении #1322561 писал(а):
Априори думается, что этот же подход используется, чтобы построить формулу в mathjax. Ну а как еще?
Не знаю, переносимость формул на новую строку особо не проверял.

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


15/11/15
644

(Оффтоп)

arseniiv в сообщении #1322562 писал(а):
Не знаю, переносимость формул на новую строку особо не проверял.

Нету.

Изображение

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

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

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

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

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



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

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


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

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