freeCodeCamp/index.md at 076c604f599c1feb2204f9049c28998c2bde825a

Files

The Coding Aviator 076c604f59 Added solution to Lock an Element to its Parent with Absolute Positioning (#34317 )

* Update index.md

* Update index.md

2019-03-09 06:04:32 -08:00

1.8 KiB

Raw Blame History

title

title
Lock an Element to its Parent with Absolute Positioning

Remember to use Read-Search-Ask if you get stuck. Try to pair program and write your own code

Lock an Element to its Parent with Absolute Positioning

Hint: 1

Use position: absolute;.

try to solve the problem now

Hint: 2

Use the right and top properties.

try to solve the problem now

Spoiler Alert!

Solution ahead!

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

Code Explanation:

#searchbar{} selects all the elements with the ID of searchbar.
position: absolute; positions the element with respect to its nearest ancestor having position: relative;.
top: 50px; and right: 50px; offsets the element by 50px to the bottom and left respectively.

1.8 KiB Raw Blame History