CODEWITHSUNDEEP
csscss-position
AMACB
AMACB

Reputation: 1298

Why does position: relative use top to shift down and bottom to shift up?

Why does CSS position: relative; use bottom to shift up, use top to shift down, left to shift right, and right to shift left?

Fiddle: click me

Am I using position: relative; incorrectly, or is this some sort of terminology I was not aware of?

Upvotes: 0

Views: 4130

Answers (5)

user5125729
user5125729

Reputation:

To put it simply it positions the element x amount of pixels from the direction specified.

Upvotes: 0

justinw
justinw

Reputation: 3966

To understand this, first let's look at the position: relative property/value.

Taken straight from w3schools:

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.

One way to understand this is, when you set a property like left to an element with relative positioning, the value you set is how far away from it's normal position it will be. So, setting left to have a value of 20px moves it 20px away from it's normal left position. A positive integer will move it to the right and a negative will move to the left. Fiddle

Or, better put by w3schools:

For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.

My above description is probably not vernacularly correct, but it helped me understand it in the beginning.

Upvotes: 0

Ram kumar
Ram kumar

Reputation: 3162

Its working properly. Please read this article http://www.webdevdoor.com/html-css/css-position-child-div-parent but please try to change position value ex 20,30,40 instead of 10

Upvotes: 0

markasoftware
markasoftware

Reputation: 12652

It's some "terminology I was not aware of", to put it in your own words. When you specify one of those values, you're specifying how far you should move it away from that side. So, when you specify a top:10px, for example, you're saying "move it 10px away from the top". I think you just had the misunderstanding that you thought it moved towards that side, but it's not exactly how it works. And this isn't just for position:relative either, it is also the same in absolute, fixed, and whatever other position values there are

Upvotes: 0

partypete25
partypete25

Reputation: 4413

The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position find out more about the position property here (w3schools)

Also, you can use negative numbers as well so to shift the element left 20px you could use:

left:-20px

Upvotes: 1

Related Questions