Jump to content
Herofeeder

when to use Position Relative

Recommended Posts

it says that position relative and absolute go when you want to adjust some text or a picture without messing with other divs in the container

the way i adjusted things before would be to create a div (for example) and then put another div-class(that would be the picture) and another div-class that would hold a paragraph ,and then i would use margins

and padding to adjust them along with display and stuff like that.

since i found out about position relative and absolute im just wondering if i could use that instead of all of the above that i just wrote .

Share this post


Link to post
Share on other sites

You only use positioning especially position: absolute; when you cannot achieve the same result with margin/padding or float/display: inline-block. Position: relative is used as a base area to position position: absolute; elements relative to the boundaries edges of position relative parent using properties top, left, right, bottom, this is usually used where you need an element to be taken out of the normal flow of elements so it can be placed over/overlap other elements. To use for anything else other than overlapping you risk having problematic layout issues.

  • Like 1

Share this post


Link to post
Share on other sites

position:relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

position:absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Edited by Ingolme
Removed links to competing websites

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...