Всем привет, с возвращением.
Сегодня мы будем говорить о позиционировании элементов на вашей веб-странице.
Поэтому попытка макета вашей страницы и
вашего кодирования, вероятно, будет одним из самых трудоемких и, потенциально,
разочаровывающих вещей, которые вы собираетесь делать во всем этом курсе.
И это одна из причин, почему я оставил почти всю неделю,
чтобы мы практиковались, выкладывая вещи на вашу страницу.
Сами идеи очень просты и просты, но
это их объединение, поскольку вы добавляете все
больше и больше на свою страницу, где вещи могут быть немного сложны.
Итак, давайте начнем говорить о различных элементах позиционирования
, или о различных свойствах позиционирования, которые вы можете использовать, хорошо?
Четыре свойства позиции являются статическими, относительными, абсолютными и
фиксированными, и по большей части они очень разные.
Как они работают вместе или как они работают, так это то, что каждый из них
также может быть изменен такими свойствами, как верхний, правый, нижний и левый.
Итак, вы говорите, какую позицию вы хотите, чтобы элемент был, и
тогда вы можете сказать, но я хочу, чтобы он был так далеко от верха или так
высоко снизу, или так далеко слева.
Итак, давайте начнем со статического, и причина, по которой мы собираемся начать со статического,
заключается в том, что вы уже использовали его все время.
Это то, что мы называем значением по умолчанию для элементов.
Если вы больше ничего не скажете, это будет настроено на это.
Как это работает, так это то, что браузер собирается разместить каждый элемент
только в следующей доступной позиции.
Вы можете дать ему такие значения, как верхний, нижний, левый и правый,
но браузер будет полностью игнорировать его. То
, как это будет работать, что-то вроде этого.
Посмотрим, смогу ли я это сделать здесь.
У тебя есть экран.
И тогда пришло время начать добавлять вещи на вашу страницу, и браузер говорит, о,
ну, это так, что он подходит прямо здесь.
И следующий пролет, так что он подходит прямо здесь.
О, у нее есть что-то, что в квартале, так что мне нужно спуститься сюда.
Таким образом, как вы добавляете, он просто начинается сверху и работает как поперек, так и вниз.
Но мы можем пойти дальше этого.
Мы можем изменить, как браузер позиционирует вещи, и
один из способов, которые мы можем сделать это, чтобы использовать положение относительное.
И когда я говорю «родственник», я имею в виду «относительно самого себя».
Куда это пойдет?
Ладно, давай немного проверим это.
Это, в основном, очень похоже на статическую позицию, но
теперь вы можете добавить эти смещения.
Новое позиционирование, новое место, которое мы ставим элемент,
это не повлияет ни на одного из своих соседей.
Вместо этого, то, что он может сделать, это оставить дыры
там, где браузер думал, что это должно было быть в первую очередь.
Обычно относительно позиционированные элементы используются в качестве контейнеров или
блоков для других элементов.
Так что позвольте мне показать вам еще один быстрый пример здесь.
Включи это.
У меня есть окно браузера, и предположим, что я собираюсь вставить элемент span, и
он будет идти прямо там.
Вместо этого, если вы скажете, что позиция относительная,
и вы дадите ей что-то вроде первой десятки, вместо того, чтобы помещать ее прямо здесь,
она на самом деле пойдёт туда, где она должна быть.
Опять же, мы просто добавляем маленькие числа, чтобы переместить вещи из того места, где они
обычно идут.
Следующая позиция - это то, что мы называем абсолютным.
И это может действительно запутать людей при первом запуске,
потому что браузер, вместо того, чтобы поместить его в следующее доступное положение, он
игнорирует все элементы и действительно просто смотрит на основной контейнер, в котором он был.
В этом случае мы покажем один пример с браузером.
Другие элементы на странице ведут себя так, как будто его даже не существует.
И это может привести к тому, что вы можете закончить с одним элементом поверх другого.
Итак, давайте попробуем это.
У меня есть браузер.
У меня не так много места, здесь.
Так вот здесь. Допустим, у меня есть div,
и я решил, что он абсолютный, и он должен быть 100 вниз сверху, и,
возможно, 100 над.
Так что он идет прямо здесь.
Ладно, если бы мы делали относительное,
следующий элемент был бы под ним.
Но если у нас есть два абсолютных значения, то следующее, что появится
, снова, прямо на него.
Ладно, последняя позиция, о которой я буду говорить, называется «исправленной».
И фиксированное положение относительно окна браузера.
Вот как они могут создавать эти страницы,
где иногда появляется всплывающее окно, и вы просто не можете заставить его уйти.
Вы продолжаете прокрутку и прокрутку, и это следует за вами.
Ну, как они это сделали, они использовали эту фиксированную позицию.
Этот элемент не будет перемещаться, даже если окно прокручивается.
Просто чтобы вы знали, используете ли вы старый браузер или пытаетесь разработать
для Internet Explorer 7 или 8, это работает только в том случае, если вы используете HTML5 DOCTYPE.
Так что снова, когда вы думаете о фиксированной позиции, подумайте о всплывающих коробках
, которые просто не исчезнут.
Или вы можете также думать об этом как о чем-то более полезном, когда вы находитесь
на странице, и у вас может быть панель навигации, которая находится сверху, и когда
вы прокручиваете страницу, вам не нужно прокручивать назад, чтобы
увидеть панель навигации, потому что она всегда там.
Итак, давайте продолжим и посмотрим на пример, где у меня есть несколько
разных элементов, которые используют разные свойства позиции.
Ладно, я собираюсь показать тебе страницу, куда я вошел, и
я положил пару элементов.
Всего два дива и пара параграфов.
И для начала я дал им немного стартового стиля, чтобы
мы могли различить их.
Для нашего div я позиционирую относительное, я дал ему высоту, ширину и границу.
Для абзацев я дал ему границу другого цвета,
дал ему верхнюю и левую, и я оставил его как положение статическое,
потому что это позиция по умолчанию, которую он всегда будет.
Так что я хочу показать тебе, как это будет выглядеть в браузере.
Так что, если вы посмотрите, вы увидите, что у меня есть два дива, один здесь и внизу, и
у меня есть три абзаца.
Один, упс, прости.
Раз, два, три.
Первое, что я хочу отметить, это то, что это выглядит не так, как некоторые из
вас могут ожидать, что он будет выглядеть, или даже точно так же, как некоторые из вас могут увидеть его, если
вы загрузите его в свой браузер.
Вместо того, чтобы помещать этот абзац вверху,
он на самом деле немного толкнут вниз.
То же самое для B и C.
Причина, которая происходит, заключается в том, что все браузеры имеют разные значения по умолчанию для
того, где должен быть расположен абзац.
Итак, позвольте мне прокрутить сюда на секунду.
Я спущусь вниз.
И вы можете видеть, что есть этот странный код прямо здесь, который говорит:
-webkit- margin - before и -webkit-margin - after.
Это пример некоторых псевдоклассов, которые они использовали.
Поэтому я не хочу, чтобы эти разные вещи по умолчанию вступали в игру.
Так что я пойду и избавлюсь от них.
После того, как я прокомментирую их и комментирую, что обратно, я обновляю, и
теперь у нас есть наши A, B и C.
Итак, снова, A, B и C, все относительные.
Вы говорите браузеру, просто поместите его в следующее доступное пространство.
Итак, давайте посмотрим, что произойдет сейчас, если я изменю свой элемент
от относительно статического или извините, от статического к относительному.
И вы можете видеть, что они переехали, и
причина, по которой они переехали, заключается в том, что я дал ему значения топ-100 и оставил 100.
Спускайся, толкайся.
Если я изменю это на 50.
Упс, 59, это сработает.
Вы можете видеть, что передвигается не так сильно.
Итак, статические просто пойти в первую очередь вы можете.
Относительно, в первую очередь вы можете, но продолжайте,
вы можете сказать, если хотите, чтобы он переместился немного в любом направлении.
Следующее, что мы собираемся сделать, абсолютное.
Может быть.
Вот мы идем, так что теперь я хочу, чтобы ты кое-что заметил.
Это А и Б, они друг на друге.
Потому что вы сказали, я хочу, чтобы вы были 100 пикселей вниз и
59 пикселей от стороны элемента контейнера.
В данном случае, это тот div.
Так что это странно, потому что они наверху друг на друга, и все это смешивается.
Есть обстоятельства, когда вы хотите, чтобы вещи были друг на друга.
Может быть, один из них будет виден, и
один из них будет скрыт, и они будут меняться динамически.
Но это то, что происходит с абсолютным.
Теперь, если я прокручу, я сделаю этот экран немного меньше, и я прокручиваю,
вы увидите, что A и B, они прокручиваются.
И, конечно, я сделал этот пример, потому что хотел показать вам, что если я переключил
это на фиксированное сейчас, вместо того,
чтобы говорить положение элемента относительно его родителя, сказав положение этого элемента относительно всего браузера.
Так что теперь все на вершине друг друга, и если я попытаюсь прокрутить.
Это не работает.
Он остается прямо там, хорошо?
Опять же, это статическое, относительное, абсолютное и фиксированное.
И я хочу, чтобы вы играли с ними и знали свои варианты,
прежде чем начать выкладывать свой код вручную.
Одна из вещей, которые я показал вам, заключается в том, что
можно разместить несколько элементов в одном и том же положении или поверх друг друга.
И есть способ справиться с этим, если вам не нравится приказ о том, что они
появляются.
И это называется Z-индекс.
Z-индекс - это просто, в основном, просто числовое значение, оно либо положительное, либо
отрицательное, что сообщает браузеру ваш порядок стекирования.
Так что если у вас есть что-то, и вы действительно уверены, что вы хотите убедиться, что оно всегда на
вершине, вы бы пошли вперед и положили на него что-то вроде 100.
Если бы тебя не волновало, ты бы мог дать отрицательное 100.
И это то, как люди могут идти вперед, и
позиционировать элементы, чтобы быть немного более динамичными позже,
когда мы добавляем некоторые JavaScript или другие вещи, подобные этому.
Таким образом, Z-index - это то, с чем не многие люди кодируют, но
это действительно полезно, когда вы используете элемент inspect,
если есть что-то ниже, и вы хотите увидеть, как он выглядит сверху.
Так что давайте продолжим и рассмотрим.
Позиционирование вашего элемента является ключом к созданию макетов, которые вы
хотите иметь.
И это особенно важно, если вы беспокоитесь о том
, что ваш сайт хорошо выглядит на маленьком экране, большом экране и т.д.
Поэтому правильное планирование сделает это намного проще для
вас, когда приходит время, чтобы кодировать вашу страницу.
Но на самом деле, самое главное, что вы можете сделать прямо сейчас, это перейти в Интернет, найти эти
учебники или различные ссылки, где они говорят о позиционировании, и играть с
ним, пока вы не почувствуете себя немного более комфортно с тем, как каждый из них работает.
Удачи.