Lock an Element to its Parent with Absolute Positioning:explain

HTML-CSS
1

why we use relative? Though i have gone through some of the documents but i am not able to understand that the element relative to which element?:

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning

2

Hi @krishnan468

Consider two elements "A (Parent - Relative)" and "B (Child - Absolute)"

If the ‘Position’ for A is set as “relative”, it means we are setting up a playground for the child elements of A
Note: "A" acts as a playground only for child elements which has property “absolute” such as "B" in this case.
Playground in the sense, “B” can be moved anywhere within the “parent” block using the properties “top, left, bottom, right, transform”
When an element is absolute it will stand top of other elements (but inside the parent element) around it, thus allows other elements o occupy its space.