An element whose position property has the value relative is first laid out just like a static element. The rendered box is then shifted vertically (according to the top or bottom property) and/or horizontally (according to the left or right property).
The properties top, right, bottom, and left can be used to specify by how much the rendered box will be shifted. A positive value means the box will be shifted away from that position, towards the opposite side. For instance, a left value of 20px shifts the box 20 pixels to the right of its original position. Applying a negative value to the opposite side will achieve the same effect: a right value of -20px will accomplish the same result as a left value of 20px. The initial value for these properties is auto, which makes the computed value 0 (zero)—that is, no shift occurs.
Evidently, it’s pointless to specify both left and right for the same element, because the position will be over-constrained. If the content direction is left to right, the left value is used, and right will be ignored. In a right-to-left direction, the right value “wins.” If both top and bottom are specified, top will be used and bottom will be ignored.
Since it’s only the rendered box that moves when we relatively position an element, this positioning scheme isn’t useful for laying out columns of content. Relative positioning is commonly used when we need to shift a box a few pixels or so, although it can also be useful, in combination with negative margins on floated elements, for some more complex designs.
Control Your Containing Blocks
One side effect of relative positioning is quite handy: a relatively positioned element is “positioned,” which means it becomes the containing block for any absolutely positioned descendants. This gives us an easy-to-use tool for controlling the position of our containing blocks: just set position to relative without moving the box at all.
Frequently Asked Questions about CSS Relative Positioning
What is the difference between relative and absolute positioning in CSS?
In CSS, the position property is used to specify the type of positioning method for an element. There are five different position values: static, relative, fixed, absolute, and sticky. Relative and absolute positioning are two of the most commonly used.
Relative positioning is the type of positioning where an element is positioned relative to its normal position. This means that setting the top, right, bottom, and left properties will cause the element to move away from its normal position. However, other elements will not adjust to fit into the gap left by the element.
On the other hand, absolute positioning allows an element to be positioned relative to the nearest positioned ancestor. If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
How does the z-index property work with relative positioning?
The z-index property in CSS controls the vertical stacking order of elements that overlap. As such, it can be used with relative positioning to control which elements appear in front when they overlap. The z-index property only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).
An element with a higher z-index will be displayed in front of an element with a lower z-index. If z-index is not specified, elements will stack in the order that they appear in the HTML document.
Can I use percentages with top, right, bottom, and left properties in relative positioning?
Yes, you can use percentages with the top, right, bottom, and left properties in relative positioning. When you use a percentage value, it’s relative to the size of the element’s containing block. For example, if you set top: 50%, it will move the element down half the height of its containing block.
What happens if I only specify one side (like top or left) in relative positioning?
If you only specify one side (like top or left) in relative positioning, the element will move away from that side by the specified amount. The other side (right or bottom) will not be affected, and the element will not move away from that side.
Can I use relative positioning with display: flex or display: grid?
Yes, you can use relative positioning with display: flex or display: grid. The position property is independent of the display property, so you can use any positioning method with any display type. However, keep in mind that some combinations might not give the desired results due to the way these properties interact.
How does relative positioning affect the flow of the document?
Relative positioning does not remove an element from the normal document flow. Instead, it alters the position of the element without changing the layout around it. This means that space for the element is still reserved in the layout as if it were in its normal position.
Can I use negative values with top, right, bottom, and left properties in relative positioning?
Yes, you can use negative values with the top, right, bottom, and left properties in relative positioning. Negative values will move the element in the opposite direction. For example, if you set top: -20px, it will move the element up by 20 pixels.
What is the use of relative positioning in CSS?
Relative positioning in CSS is used when you want to adjust the position of an element without affecting the layout of other elements. It’s also used when you want to create a context for absolutely positioned child elements.
How does relative positioning interact with other CSS properties like margin, padding, and border?
The margin, padding, and border properties affect the size and space around an element. These properties work the same way with relative positioning as they do with normal flow. The top, right, bottom, and left properties of relative positioning move the element from its normal position, but they do not affect the size of the element or the space around it.
Can I animate the top, right, bottom, and left properties of a relatively positioned element?
Yes, you can animate the top, right, bottom, and left properties of a relatively positioned element using CSS transitions or animations. This can create a variety of effects, such as an element sliding in from off-screen or moving around the page.
Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.
