Files
freeCodeCamp/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md
Nicholas Carrigan (he/him) 3da4be21bb chore: seed chinese traditional (#42005)
Seeds the chinese traditional files manually so we can deploy to
staging.
2021-05-05 22:43:49 +05:30

2.1 KiB

id, title, challengeType, videoUrl, forumTopicId, dashedName
id title challengeType videoUrl forumTopicId dashedName
587d781e367417b2b2512acb 絕對定位的參照物是元素的父元素 0 https://scrimba.com/c/cyLJ7c3 301060 lock-an-element-to-its-parent-with-absolute-positioning

--description--

接下來要介紹 CSS position 屬性的取值選項 absolute,它的含義是相對於其包含塊定位。 和 relative 定位不一樣,絕對定位會將元素從當前的文檔流裏面移除,周圍的元素會忽略它。 這樣我們就可以用 CSS 的 top、bottom、left、right 屬性來調整元素的位置。

絕對定位比較特殊的一點是元素的定位參照於最近的 positioned 祖先元素。 如果它的父元素沒有添加定位規則(默認是 position: relative;),瀏覽器會繼續尋找直到默認的 body 標籤。

--instructions--

通過設置 position 屬性值爲 absolute,將 #searchbar 元素固定到它的父元素 section 的右上角。 即設定其 topright 爲 50 像素。

--hints--

#searchbar 元素的 position 屬性值應爲 absolute

assert($('#searchbar').css('position') == 'absolute');

#searchbar 元素的 top 屬性值應爲 50px。

assert($('#searchbar').css('top') == '50px');

#searchbar 元素的 right 屬性值應爲 50px。

assert($('#searchbar').css('right') == '50px');

--seed--

--seed-contents--

<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>

--solutions--

<style>
  #searchbar {
    position: absolute;
    top: 50px;
    right: 50px;
  }
  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>