How to Position one element relative to another in CSS - Life in Coding (2023)

In this blog post, we will demonstrate to you how to position one element relative to another in CSS through position property so that you can place the html elements in your favorite desired place.

Contents

  1. Position Property
  2. How to position one element relative to another in CSS?
  3. How do you change the position of an element in CSS?
  4. How to place two div elements next to each other in CSS?
  5. How do you overlap a div?
  6. How do i make a div in front of everything?
  7. Conclusion

Using CSS to move the elements in the web page can be quite confusing sometimes but knowing the simple things about CSS can make the web designing process beautiful & smooth.

Positioning the elements on the page in the exact desired place is the primary need of any web developer. When we place elements in the Html they tend to place themselves by their default behavior & we have to further make changes to gain the desired output.

And once we achieve the desired output by applying correct CSS then the design gains a qualitative weightage. Therefore, it stands different from the rest of competitors & brings more traffic to the website.

Position Property

One of the common needs is to position the element at a certain point based on the parent element. For Example, You have the close icon/button & you need to further place it exactly in top right corner of the parent div. This is where position property comes into picture.

Position Property accepts 5 different values. Below is the explanation about the Property values.

Static

This is the default value of position property. This means if you do not set any value to the property then Static value will be applied automatically by default.

In this type, Elements are rendered in the order they are placed in the html page. The rendering of the elements is straightforward as per the flow of the document.

(Video) CSS Positioning: Position absolute and relative explained

The other properties that are used with position property are top, right, bottom, left & these properties do not work in coordination with static value. For example, if you set value to the property top then it will have no effect on the element because its position is set as static.

Relative

This value goes further ahead of the static value. It also renders elements in a normal document flow but we can move the elements from its normal position by setting top, right, bottom & left properties.

For example, applying left property value to the relative element will move the element to the right & will provide an extra gap of the value provided in the left property. If the left is set as 50px then the element will render a space of 50px to the left of the element.

Absolute

Elements with Absolute positioning are placed in accordance with the relative parent element. The positions of top, right, bottom & left are rendered as per the parent relative element of this current element.

So when you apply Absolute & top 50px then firstly the CSS framework will search the parent element of the element that has position relative. Once it is found then top 50px will be applied based on this parent element.

This value works great for positioning the elements at the exact desired place by setting the parent position to relative.

Any static parent elements will be ignored & only relative elements are considered while applying top, right, bottom & left values.

Absolute elements can overlap over the other elements because they are directly placed as per the position. When position absolute is set with top as 40px & left as 20px then the element will be placed exactly at this position. If any other element exists in the same place then both elements will be overlapped.

Fixed

The name of this value is telling exactly what it does to elements. The elements are fixed at a certain position & do not move from their position.

There is no concept of parent tag here. For fixed position there is only one parent & that is body tag.

The element becomes fixed & stays at the same position even if the user scrolls down to the web page.

Sticky

All the browsers do not support this CSS property value. It works like a combination of relative & fixed position. At first it acts like a relative element & when the user scrolls then at a certain point the element switches its mode to fixed.

The element becomes fixed at a certain point of scroll as per the offset. For example, if the top is set to 50px then after scroll location reaches a point then the element will be fixed with top 50px.

How to Position one element relative to another in CSS?

Positioning one element relative to another means we have an outer element on the screen & within that element we have another inner element & this inner element has to be placed in a certain position based on the outer position.

The outer element should be a container element like divs or body tag itself.

To place some element within the element the outer element has to occupy a larger width & height.

Position properties are used to achieve this & make the elements to be placed by setting top, right, bottom & left properties.

(Video) Using CSS Position Absolute: some practical examples

Suppose we have to place the close button in the top right position of a box then below is practical code to achieve the desired output.

HTML :-

 <div style="position: relative; width: 400px; height: 200px; border: solid 1px blue;"> Hide me please <div style="position: absolute; top: 10px; right: 10px;"> <button>close</button> </div> </div>

Result :-

How to Position one element relative to another in CSS - Life in Coding (1)

In the code above, 2 divs are defined & one is wrapped inside another. The outer div acts as relative for the inner one. So position relative is set for the outer div.

The parent element which has the blue border is set as position relative. So the child element (button div in this case) will be positioned taking into consideration the parent relative element.

The outer div also has some text displaying & it is displayed as per default behavior of the div element.

We want to place a close button on the top right of the outer div so the inner div is given the position absolute. The top & right properties place the div as per the pixels specified.

The inner div will be positioned based on the outer relative div. So the measurement for the inner div with position absolute will be related to the outer div with position relative.

How do you change the position of an element in CSS?

The web page is filled with a bunch of elements & it is like a marketplace of html tags. Changing the position of certain elements can be tricky.

The visitors of your website land on your web pages to consume some kind of information, so to change the position of elements to place them at a perfect spot can be the important need.

When we create elements in an HTML document then they are rendered by their default behavior & further we have to make modifications in CSS to move them.

Four properties are used to change the position of an element & they are top, right, bottom & left. The value that you set to a particular position will bring the element to that spot.

This can be better understood with practical example as follows :-

CSS :-

 .one { position: absolute; background-color: red; width: 100px; height: 100px; top: 100px; left: 150px; } .two { position: absolute; background-color: green; width: 100px; height: 100px; top: 50px; right: 150px; } .three { position: absolute; background-color: blue; width: 100px; height: 100px; bottom: 0px; right: 0px; }

HTML :-

 <div class="one"> </div> <div class="two"> </div> <div class="three"> </div>

Result :-

How to Position one element relative to another in CSS - Life in Coding (2)

In the above practical code, 3 divs are displayed & they are positioned with top, right, bottom & left properties.

In the CSS, three classes are defined with position absolute. The first class places the element to top 100px & left 150px. The same can be seen in the result section with the red div box.

In the similar way, the second class moves the element to top 50px & right 150px. This can be seen in the result image with green color.

In the last class, we have mentioned bottom & right as 0. So the div element is stuck to the bottom right of the screen that is displayed in blue color in the output.

(Video) CSS Positioning Tutorial - Relative vs. Absolute vs. Fixed vs. Sticky | Crash Course

How to place two div elements next to each other in CSS?

The div elements are used a majority of times & acts as a container for the content on the website. It helps to give a structure to the content that is to be displayed on the screen.

When we place a div tag in the HTML, by default it will occupy the complete row. And if we place 2 div elements next to each other then they are displayed in 2 separate rows.

The reason for this is the display block property that is applied to all the divs by default so we need to change the value of this property to display the divs next to each other.

Setting the position property to inline-block will do the trick. Once this value is applied to the divs then they will not occupy the complete row & elements can be displayed next to each other.

There are other ways too to achieve the same task but this looks the simplest one among others.

Lets’ have a look at the practical perspective now :-

CSS :-

 .box { display: inline-block; background-color: #d1383d; width: 100px; height: 100px; margin: 10px; }

HTML :-

 <div class="box"> </div> <div class="box"> </div>

Result :-

How to Position one element relative to another in CSS - Life in Coding (3)

To demonstrate with ease, we have a couple of divs next to each other in the HTML code section. Both have been given the same class.

In CSS code, the class style is manipulated & the display property is set to inline-block & this only style is responsible for the displaying the divs next to each other. Rest of the styles like width, height, etc. are the basic styles.

In the Result section, both the divs can be seen next to each other. And like this we can have multiple divs that can be displayed in the similar way.

How do you overlap a div?

In a website, we need to display some content above the other due to the importance of one content over another or to create a unique design that looks weird & catchy.

The overlapping can be sometimes limited to some part of the element. In this case we do not completely overlap the elements but only some part of the element is overlapped.

In the normal flow of elements, the elements are either displayed side by side or they are displayed on another row directly. But CSS provides a solution for overlapping the elements.

With the help of position absolute property we can place the elements like div in any direction on the page & further we can overlap them with z-index property.

z-index property does the work of determining which element will be shown on the top of another. It collects numerical values & the element that has a high z-index is shown on the top of everything.

CSS :-

 .container { position: relative; } .menu { z-index: 1; position: absolute; background-color: blue; width: 100%; height: 100px; top: 0; } .content { z-index: 0; position: absolute; background-color: red; width: 100%; height: 100px; top: 50px; left: 60px; width: 80%; height: 200px; }

HTML :-

 <div class="container"> <div class="menu"></div> <div class="content"></div> </div>

Result :-

How to Position one element relative to another in CSS - Life in Coding (4)

(Video) position relative | CSS #1

To demonstrate the use of z-index property for overlapping elements, In the above code example, we have placed 2 div elements in the HTML code. This 2 div’s are placed in a main container div.

The container div is applied to the position relative so the other 2 divs within it will be positioned taking into consideration the container div.

In the CSS section, you can see that both the inner div elements have a z-index property set & the div with class menu has the lowest value that is 0. So it is displayed behind the div with class content which has higher value as 1 as compared to the menu div.

To understand with more clarity, in the below Code we have swapped the z-index property of menu & content div. The menu div has higher value & content div has lower value.

Hence in the below Result image, the content div is shifted to back & menu div is brought to front.

CSS :-

 .container { position: relative; } .menu { z-index: 0; position: absolute; background-color: blue; width: 100%; height: 100px; top: 0; } .content { z-index: 1; position: absolute; background-color: red; width: 100%; height: 100px; top: 50px; left: 60px; width: 80%; height: 200px; }

How to Position one element relative to another in CSS - Life in Coding (5)

How do i make a div in front of everything?

div can be aligned in front of everything so that it remains reachable to the eyes & does not hide itself between some other elements.

This div will be similar to other divs & will be the one among all other elements but it will be displayed in the front of every other element.

These divs play an important role when we have to display something on the web page that we want the users attention on immediately once they visit the web page. And the users may scroll down but this important content will chase them everywhere & it will be in front of everything.

This type of content is mostly displayed in the bottom left of the screen or left side of the screen or at the top/bottom of the screen.

There are so many different scenarios of displaying div in front of everything & sometimes it is used to apply creativity for the web page design.

Here also z-index property is used to bring the div on the top everything. In the below code the value is set as 99999 for z-index property & this is just a random value. We have to set the value that is higher than other elements in the document.

Also the position property is set to fixed that means the element will be fixed on a particular place. It will not move even if we scroll through the web page.

CSS :-

 .front { position: fixed; z-index: 99999; }

Conclusion

Now you have learned the small yet powerful tricks to place the elements on the screen with total control using relative & absolute positioning.

The elements can be easily moved with the help of top, right, bottom & left properties.

When we have control over placing the elements in the perfect desired spot then the design of the web page improves in many terms.

(Video) CSS position properties (relative, absolute, fixed, position sticky, and floats) — Webflow tutorial

Practice makes man perfect so keep practicing & experimenting your hands on CSS.

Happy Web Development 🙂

FAQs

How do you set position of an element relative to another CSS? ›

In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.

How do I put an element on another element in CSS? ›

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

How do you position a div relative to another element? ›

We can make the dialog div positioned relative to the parent div by first making it a child of the parent div and then setting the parent position to relative. The parent is set to relative position and the dialog has absolute position. Now the dialog div is rendered over the parent div.

What is relative positioning in CSS? ›

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.

How do you position an element with respect to another element? ›

position: absolute will position the element by coordinates, relative to the closest positioned ancestor, i.e. the closest parent which isn't position: static . Have your four divs nested inside the target div, give the target div position: relative , and use position: absolute on the others.

How do I move a div position in CSS? ›

NOTE − You can use bottom or right values as well in the same way as top and left. This div has absolute positioning.
...
Absolute Positioning
  1. Move Left - Use a negative value for left.
  2. Move Right - Use a positive value for left.
  3. Move Up - Use a negative value for top.
  4. Move Down - Use a positive value for top.

How do I overlay a div in CSS? ›

By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.

How do you put two elements on top of each other in CSS? ›

Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.

How do you overlap things in CSS? ›

Easily overlap content with CSS Grid - YouTube

What is absolute and relative position in CSS? ›

position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.

What is position sticky CSS? ›

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Which CSS property specifies the type of positioning method used for an element? ›

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

What are the different types of positioning using CSS? ›

Types of positioning

A positioned element is an element whose computed position value is either relative , absolute , fixed , or sticky . (In other words, it's anything except static .) A relatively positioned element is an element whose computed position value is relative .

How many types of positions are there in CSS? ›

This property takes in five values: static , relative , absolute , fixed , and sticky .

How many types of position are there? ›

The four main anatomical positions are: supine, prone, right lateral recumbent, and left lateral recumbent.

What does position absolute do in CSS? ›

Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does. When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.

How do I change the position of an image in HTML CSS? ›

You can easily position an image by using the object-position property.
...
Property Value:
  1. left: Place an element on its container's right.
  2. right: Place an element on its container's left.
  3. inherit: Element inherits floating property from it's parent (div, table etc…) elements.
  4. none: Element is displayed as it is (Default).
13 Jul 2021

How will you select an element with a specific class in CSS? ›

class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.

How do I move elements with transform CSS? ›

To move an object from its initial position we use: transform: translate(x,y); , where the x value should be positive and the y value should be 0 to move the object to the right.

How do I move content to the right in CSS? ›

If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.

How do I move content left in CSS? ›

If position: absolute; or position: fixed; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor. If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.

How do I put one image over another in CSS? ›

As the simplest solution. That is: Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image.

How do I make a div float on top of another? ›

Use position:absolute; and set the "popup" one to be positioned within the boundaries of the other. The "popup" div should likely also be smaller. Use z-index to stack the "popup" one above the other one (give it a higher value for z-index ).

How do I bring a div in front of another div? ›

Use the CSS z-index property. Elements with a greater z-index value are positioned in front of elements with smaller z-index values. Note that for this to work, you also need to set a position style ( position:absolute , position:relative , or position:fixed ) on both/all of the elements you want to order.

How do I put two divs side by side? ›

To position the divs side by side, we are using the float property to float each . float-child element to the left. Since they are both floating to the left, they will display side by side if there's enough space for both to fit.

Which CSS can be used to order the layers on top of each other? ›

The z-index property specifies the stack order of an element.

How do you overlap elements in CSS Flexbox? ›

How to Overlap Flex Items with CSS Flexbox - Beginner Tutorial - YouTube

What is relative positioning? ›

Relative Position: Setting the top, right, bottom, and left properties of an element with position: relative; property will cause it to adjust from its normal position. The other objects or elements will not fill the gap.

What is :: after in CSS? ›

::after (:after) In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

How do you float an element in CSS? ›

You can float elements to the left or right, but only applies to the elements that generate boxes that are not absolutely positioned. Any element that follows the floated element will flow around the floated element on the other side.
...
Floating Elements with CSS.
ValueDescription
noneRemoves the float property from an element.
2 more rows

What is difference between sticky and fixed position in CSS? ›

1. Element with position: fixed property is fixed to the viewport and doesn't move irrespective of scrolling. Element with position: sticky property can scroll to an offset value provided by the user.

What is Z index in CSS? ›

Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).

Which is the correct CSS syntax? ›

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

What are the four types of positioning? ›

There are four main types of positioning strategies: competitive positioning, product positioning, situational positioning, and perceptual positioning.

Which two CSS properties can be used to position multiple HTML elements next to one another? ›

Answer. display: inline property can be used to position multiple html elements next to each other. display: inline is your answer.

Which value of the CSS position property should you use to position an element relative to the browser window? ›

Fixed. The fixed value is similar to absolute as it can help you position an element anywhere relative to the document, however this value is unaffected by scrolling.

What are the two ways of defining the position of elements in CSS explain? ›

The positioning of an element can be done using the top, right, bottom, and left properties. These specify the distance of an HTML element from the edge of the viewport. To set the position by these four properties, we have to declare the positioning method.

What is positioning elements in HTML? ›

Positioning allows you to take elements out of normal document flow and make them behave differently, for example, by sitting on top of one another or by always remaining in the same place inside the browser viewport. This article explains the different position values and how to use them.

How do you change the position of text in HTML? ›

We can change the alignment of the text using the text-align property. We can align the text in the center, Left, Right. The text alignment can be done with CSS(Cascading Style Sheets) and HTML Attribute tag. Note: The left alignment of the text is default.

What is position relative in CSS? ›

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.

What is the position properties in CSS? ›

What is the CSS position property? The CSS position property defines the position of an element in a document. This property works with the left, right, top, bottom and z-index properties to determine the final position of an element on a page. There are five values the position property can take.

What are the basic positions? ›

Basic positions
  • All-fours.
  • Kneeling.
  • Lying.
  • Sitting.
  • Squatting or crouching.
  • Standing.

How do I change the position of text in CSS? ›

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.
  1. Move Left - Use a negative value for left.
  2. Move Right - Use a positive value for left.
  3. Move Up - Use a negative value for top.
  4. Move Down - Use a positive value for top.

What does position type mean? ›

Position Type means the appropriate instructional level of the teacher or whether the teacher is in a critical curricular area Hard to Staff Position. Sample 1Sample 2. Position Type means the appropriate instructional level of the teacher or whether the teacher is in a Hard to Staff Position.19 DE Reg.

How do you place a div at the end of another div? ›

Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.

How do I put one div above another? ›

By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.

Which CSS property specifies the type of positioning method used for an element? ›

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

Which positioning property in CSS makes elements to be moved around within their parent element? ›

Relative positioning

Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.

How do I move text from top to bottom in CSS? ›

“move text to bottom css” Code Answer
  1. . top-align {
  2. vertical-align: top;
  3. }
  4. . center-align {
  5. vertical-align: middle;
  6. }

How do I align text below each other in HTML? ›

The text-align-last property specifies how to align the last line of a text. Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a <div> with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs.

How do I move something to the bottom in CSS? ›

Using the translateY and top property. Just set element child to position: relative and than move it top: 100% (that's the 100% height of the parent) and stick to bottom of parent by transform: translateY(-100%) (that's -100% of the height of the child).

How do you overlap things in CSS? ›

Easily overlap content with CSS Grid - YouTube

How do you put two elements on top of each other in CSS? ›

Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.

How do I make an overlay in CSS? ›

One of the ways of creating an overlay is by absolutely positioning an HTML element on the page. We create <div> element in the markup then position it absolutely with the position property. After it, we give the <div> high z-index value to make it on top of all other elements on the page with the z-index property.

What are the four types of positioning? ›

There are four main types of positioning strategies: competitive positioning, product positioning, situational positioning, and perceptual positioning.

What is relative and absolute position in CSS? ›

position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.

What are the different types of positioning techniques? ›

There are three standard types of product positioning strategies brands should consider: comparative, differentiation, and segmentation.

How many types of positions are there in CSS? ›

This property takes in five values: static , relative , absolute , fixed , and sticky .

What does absolute position mean in CSS? ›

Absolute positioning defines the position of a given bounding box from the top and left side margins of the web page. This not only allows objects to be placed in an exact location, it also allows objects to be placed one on top of another.

What is the difference between absolute and fixed positioning in CSS? ›

Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block. Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block.

Videos

1. CSS Positioning Tutorial
(Amy Spielmaker)
2. CSS Position Property | Static | Relative | Fixed | Absolute | CSS 39
(Husain Sir)
3. Controlling background-images | CSS Tutorial
(Kevin Powell)
4. Keeping Footer at the Bottom of the Page (HTML & CSS)
(Coding Journey)
5. How To Overlay One Div Over Another Div or Image Using HTML & CSS
(Ali Hossain)
6. 10 CSS Pro Tips - Code this, NOT that!
(Fireship)
Top Articles
Latest Posts
Article information

Author: Kimberely Baumbach CPA

Last Updated: 02/12/2023

Views: 5944

Rating: 4 / 5 (61 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Kimberely Baumbach CPA

Birthday: 1996-01-14

Address: 8381 Boyce Course, Imeldachester, ND 74681

Phone: +3571286597580

Job: Product Banking Analyst

Hobby: Cosplaying, Inline skating, Amateur radio, Baton twirling, Mountaineering, Flying, Archery

Introduction: My name is Kimberely Baumbach CPA, I am a gorgeous, bright, charming, encouraging, zealous, lively, good person who loves writing and wants to share my knowledge and understanding with you.