Проверьте свои навыки: позиционирование

Цель этого задания - чтобы вы поработали с CSS свойством position и его значениями которые описаны в нашем уроке Позиционирование. Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала.

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.

Если вы застрянете, попросите нас о помощи — см. раздел Оценка и дальнейшая помощь в конце страницы

Позиционирование Раз

В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.

The green box is at the top right of a container with a grey border.

Попробуйте обновить живой код ниже для воссоздания законченного примера:

В качестве дополнительной задачи, сможете ли вы изменить цель так чтоб она отображалась под текстом?

Примечание: Для оценки или дальнейшей работы, загрузите отправную точку этого задания, чтобы работать в вашем собственном или онлайн-редакторе

Позиционирование Два

В примере ниже если вы прокрутите блок боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.

The content is scrolled but the sidebar has stayed in place.

Попробуйте обновить живой код ниже для воссоздания законченного примера:

Примечание: Для оценки или дальнейшей работы, загрузите отправную точку этого задания, чтобы работать в вашем собственном или онлайн-редакторе

Оценка и дальнейшая помощь

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.

  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать:

    • Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.