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.
Okay I’m a beginner as well but I think I know this one
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.
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.
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.
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.
