Diffrence between absolute and relative?

HTML-CSS
1

What’s the difference between absolute and relative? When should we use them when building our websites? And what do people mean by flow of the document? I tired searching online for answers, but I understand none of them… Thanks:)

2

First, ill start with the flow. When we talk about the document flow, we usually mean in what order html elements are being loaded/ordered on the screen. For example:

<main>
  <h2>Title</h2>
  <p>some text</p>
</main>

Here i made a simple main tag and withing it, i nested a h2 heading and a paragraph. The regular flow within the main element will be <h2>, followed by <p>.
If we put position: relative on an element, its position can be adjusted relative to its regular position, using the properties top, bottom, left, right. For example we can use top: 20px, which will move it 20px from its top border. An element with position: absolute will be moved relative to the nearest parent element which has position property(for example if i put position: relative on the <main> element and then i use position: absolute on the <p>, the paragraph will be adjusted relative to the <main> and will be removed from the normal flow of the document, which means it will no longer be positioned beneath/next/after the <h2> element. Instead, using a property like top: 20px, will place it 20px from the <main> top border. Position abosolute would also place it on top of the <h2> element, unless it was also adjusted with other properties. Its important to note, that if the <p> element has no parent with position property(we dont set position value for the main element), it will be positioned relative to the <body> element.
Those manipulations are used when you want to hardcode positioning of elements inside your document, but usually, people prefer to use other measures, as it can become tricky to keep track of how you positioned different elements and maintain the document.
A good source to check such notions is w3schools

3

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