Can someone explain me about Basic CSS's relative position, please?

Here is the link:

I still don’t understand how to use “Relative” position to change for an element in page layout. Especially, when I set Position as “Relative” then, I set “Top”… It went to “Bottom”. What is it? I read again and again but I don’t get it. Can someone show me any reference relating to this or can you spare your precious time to explain to me a bit? All I want to say is “Thank you for helping me out!”

<style>
h2 {
position: relative;
top: 15px;
}
</style>
<body>
<h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>

Your browser information:

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

Challenge: Change an Element’s Relative Position

Link to the challenge:

Okay I’m a beginner as well but I think I know this one :stuck_out_tongue:

Setting top: 15px; in this context will move the element 15px down from the top of its relative position, so your H2 moves downwards 15px because its being pushed 15px from the top.

1 Like

okay though I am a newbie too, but let me try .
when you position an item relative, Its is relative to the normal flow which was static(it maintains same position and can be adjusted with TOP, RIGHT, BOTTOM &LEFT. properties. giving it a Top of 20px will push it downward 20px away.
a Right: 0px will push it to the right edge of the page , Bottom: 0px will push it down,…left likewise.

someone with a good understanding can help us out please. so we all learn.

from w3schools:
[

CSS Layout - The position Property - W3Schools

www.w3schools.com › css › css_positioning
](https://www.w3schools.com/css/css_positioning.asp)

An element with position : relative ; is positioned relative to its normal position . Setting the top, right, bottom, and left properties of a relatively - positioned element will cause it to be adjusted away from its normal position . Other content will not be adjusted to fit into any gap left by the element.

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Thank you so much @avnerkluger

Thank you so much @balqees001

Thank you so much cutie @jwilkins.oboe