freeCodeCamp

3.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d781e367417b2b2512acb	Lock an Element to its Parent with Absolute Positioning	0		Блокировка элемента для его родителя с абсолютным позиционированием

Description

Следующая опция для свойства position CSS является absolute , которая блокирует элемент на месте относительно его родительского контейнера. В отличие от relative положения, это удаляет элемент из нормального потока документа, поэтому окружающие объекты игнорируют его. Свойства смещения CSS (сверху или снизу и слева или справа) используются для настройки положения. Один нюанс с абсолютным позиционированием состоит в том, что он будет заблокирован относительно его ближайшего расположенного предка. Если вы забыли добавить правило позиции к родительскому элементу (это обычно делается с использованием position: relative; ), браузер будет продолжать искать цепочку и, в конечном счете, по умолчанию использовать тег body.

Instructions

Заблокируйте элемент #searchbar в верхнем правом углу родительского section , объявив его position absolute . Дайте ему top и right смещения по 50 пикселей каждый.

Tests

tests:
  - text: 'Элемент <code>#searchbar</code> должен иметь <code>absolute</code> <code>position</code> .'
    testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
  - text: 'Ваш код должен использовать <code>top</code> смещение CSS 50 пикселей в элементе <code>#searchbar</code> .'
    testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
  - text: 'Ваш код должен использовать <code>right</code> смещение CSS 50 пикселей в элементе <code>#searchbar</code> .'
    testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'

Challenge Seed

<style>
  #searchbar {



  }
  section {
    position: relative;
  }
</style>
<body>
  <h1>Welcome!</h1>
  <section>
    <form id="searchbar">
      <label for="search">Search:</label>
      <input type="search" id="search" name="search">
      <input type="submit" name="submit" value="Go!">
    </form>
  </section>
</body>

Solution

// solution required

3.5 KiB Raw Blame History Unescape Escape