freeCodeCamp

2.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d781e367417b2b2512acb	Lock an Element to its Parent with Absolute Positioning	0		使用绝对定位将元素锁定到其父级

Description

CSS position属性的下一个选项是absolute ，它将元素相对于其父容器锁定到位。与relative位置不同，这会从文档的正常流中移除元素，因此周围的项会忽略它。 CSS偏移属性（顶部或底部和左侧或右侧）用于调整位置。具有绝对定位的一个细微差别在于它将相对于其最近定位的祖先被锁定。如果您忘记向父项添加位置规则（通常使用position: relative; ），浏览器将继续查找链并最终默认为body标记。

Instructions

通过将其position声明为absolute将#searchbar元素锁定到其section的右上角。给它每个50像素的top和right偏移。

Tests

tests:
  - text: '<code>#searchbar</code>元素的<code>position</code>应设置为<code>absolute</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>#searchbar</code>元素上使用50像素的<code>top</code> CSS偏移量。'
    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>#searchbar</code>元素上使用50像素的<code>right</code> CSS偏移量。'
    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

2.5 KiB Raw Blame History Unescape Escape