Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

2.6 KiB

Raw Permalink Blame History

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) は位置を調整するために使われます。

絶対位置指定の注意点の一つは、最も近い position 指定がされている 祖先要素に対して固定されることです。親となる項目に position ルールを追加する (一般的に position: relative; が使われます) ことをもし忘れると、ブラウザは一連の要素を辿って探し続け、最終的には body タグがデフォルトとして使われます。

--instructions--

#searchbar 要素の position を absolute と宣言して、親の section の右上に固定してください。 top と right にそれぞれ 50 ピクセルのオフセットを設定してください。

--hints--

#searchbar 要素の position を absolute に設定してください。

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

50 ピクセルの top CSS オフセットを #searchbar 要素に使用する必要があります。

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

50 ピクセルの right CSS オフセットを #searchbar 要素に使用する必要があります。

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>

2.6 KiB Raw Permalink Blame History