freeCodeCamp

4.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d781e367417b2b2512ac9	Change an Element's Relative Position	0		Изменение относительного положения элемента

Description

CSS обрабатывает каждый элемент HTML как свой собственный ящик, который обычно называют CSS Box Model . Элементы уровня блока автоматически начинаются с новой строки (считайте заголовки, абзацы и div), в то время как встроенные элементы располагаются внутри окружающего содержимого (например, изображения или промежутки). Стандартная компоновка элементов таким образом называется normal flow документа, но CSS предлагает свойство position, чтобы переопределить его. Когда позиция элемента установлена на relative , она позволяет указать, как CSS должен перемещать ее относительно текущей позиции в обычном потоке страницы. Он соединяется со свойствами смещения CSS left или right , а top или bottom . Они говорят , сколько пикселей, проценты, или Эмс , чтобы переместить элемент от места , где она обычно располагается. В следующем примере перемещение абзаца 10 пикселей снизу:

п {
позиция: относительная;
снизу: 10 пикселей;
}

Изменение положения элемента относительно относительного не удаляет его из обычного потока - другие элементы вокруг него все еще ведут себя так, как если бы этот элемент находился в позиции по умолчанию. Заметка
Позиционирование дает вам большую гибкость и силу над визуальным расположением страницы. Приятно помнить, что независимо от положения элементов базовая разметка HTML должна быть организована и иметь смысл при чтении сверху вниз. Это то, как пользователи с нарушениями зрения (которые полагаются на вспомогательные устройства, такие как устройства чтения с экрана) получают доступ к вашему контенту.

Instructions

Измените position h2 на relative и используйте смещение CSS, чтобы переместить его на 15 пикселей от top где он находится в нормальном потоке. Обратите внимание, что нет никакого влияния на позиции окружающих элементов h1 и p.

Tests

tests:
  - text: Элемент <code>h2</code> должен иметь свойство <code>position</code> заданное <code>relative</code> .
    testString: 'assert($("h2").css("position") == "relative", "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.");'
  - text: Ваш код должен использовать смещение CSS для относительно позиционирования <code>h2</code> 15px от <code>top</code> где он обычно сидит.
    testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.");'

Challenge Seed

<style>
  h2 {


  }
</style>
<body>
  <h1>On Being Well-Positioned</h1>
  <h2>Move me!</h2>
  <p>I still think the h2 is where it normally sits.</p>
</body>

Solution

// solution required

4.7 KiB Raw Blame History Unescape Escape