What is the difference between absolute and relative positioning? The absolute position is so confusing to me

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **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" placeholder="INSERT">
    <input type="submit" name="submit" value="Go!">
  </form>
</section>
</body>

  **Your browser information:**

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

Challenge: Lock an Element to its Parent with Absolute Positioning

Link to the challenge:

2

There is a lot to explain here. I would suggest you use the googles to find some explanations. I found this one on the FCC news site:

CSS Positioning – Position Absolute and Relative Example

After reading up on this if you still have questions then perhaps you could ask a very specific question about what you don’t understand.

1 Like
3

Hello @hieuledang3110,

To explain shortly, an element who got the absolute position will be positioned in function of his parent element or the global page bloc with the coordinate 0 0 (Top Left). It will also be removed from the HTML flow such as the fixed property.

For the relative position, it stays into the HTML flow and it is deviate from its place into the flow.

The best to realize is to do position tests and see what are the visual results. Also, if what explained the freeCodeCamp class didn’t work to make ou understand, try to search the position property on Google and find the explanation that works for you.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.