Div float on top of another div reactjs

Question

When the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top):

Nội dung chính Show

Before we get started
Inline-block
Inline-flex & Inline-Grid
How do I make a div float on top of another div?
How do you overlay a div on another div in react?
How to stack div above another div?
How do I hover a div over another div?

The background and borders of the root element.
Descendant non-positioned elements, in order of appearance in the HTML.
Descendant positioned elements, in order of appearance in the HTML.

See for an explanation of positioned and non-positioned elements.

Keep in mind, when the order property alters rendering from the order of appearance in the HTML within flex containers, it similarly affects the order for stacking context.

In this example, DIV

1 through DIV

4 are positioned elements. DIV

5 is static, and so is drawn below the other four elements, even though it comes later in the HTML markup.

You can make the container a flex container and then align the items to the bottom by setting the align-items property to “flex-end”. The container should have a height.

.container { height: 350px; display: flex; align-items: flex-end; }

If you want the main axis of the flex container, which is the direction that the flex items are laid out in, to be going down the page, you can change the flex-direction property to “column” and justify the content to the end of the flexbox:

flex-direction: column; justify-content: flex-end;

Note that you can’t justify individual flex items by setting justify-self: flex-end; because .

If you want to move all of the flex items down except the first flex item, you can set the

.container { height: 350px; display: flex; align-items: flex-end; }

0 of the first item to

.container { height: 350px; display: flex; align-items: flex-end; }

1:

Came across a situation where you want to put the div side by side? No worries, I will teach you five ways to align div side by side using CSS.

Those five ways are,

Float
Flexbox
Grid
Inline-block
Inline grid/flex, etc.

Let’s learn all of those five methods practically,

Before we get started

I will use codedamn playground to demonstrate the examples because I don’t have to create the files and folders inside my local Operating system. But feel free to choose either way.

If you want to use the playground, follow these steps:

Step 1: Visit the codedamn official website. Create an account there.

Step 2: I have already set up the necessary files inside the playground for you. At the top right, you will see the fork button. Click on the fork button and Fork the playground. Follow along with me.

Link to playground

Step 3: Once you open the playground, you will see the CSS folder on the left side. I have created separate files for different methods.

Inside the index.html file, I have linked

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

0 it as the default CSS file.

Float

The

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

1 property of CSS will define how the element should float.

Create two divs inside the index.html file. Give class names first for the first div and second for the second div.

<div class="first"></div> <div class="second"></div>

Code language: HTML, XML (xml)

Now open the

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

0 file. Inside this file, we give both the divs some height and width of 100px and give them random colors to differentiate.

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

You can see that our divs are sitting from top to bottom.

But we want to align them side by side,

For the

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

4, add

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

5 because we want to keep it on the left side, and for the

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

6, add the

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

7 property, which will make the div float on the right side.

The code should look like this.

*{

margin: 0;
padding: 0;

}
.first{width:50vw;
height: 100px;
background-color: 
# c4c4;float: left;
}
.second {width: 50vw;
height: 100px;
background-color: blueviolet;
float: right;
}

Code language: CSS (css)

That’s it. Using float, you can align divs side by side, but what if we have three divs? or multiple divs? You add the

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

7 property for the last element, and for the first to last but one element, add the

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

5 CSS property.

Flexbox

Aligning divs side by side using flexbox is one of the easiest parts. You need to write only one line of code inside CSS.

Close the

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

0 file, and open the

*{

margin: 0;
padding: 0;

}
.first{width:50vw;
height: 100px;
background-color: 
# c4c4;float: left;
}
.second {width: 50vw;
height: 100px;
background-color: blueviolet;
float: right;
}

Code language: CSS (css)

1 file. We need to make little changes inside the index.html file, delete the div elements, and link to the CSS file from

// Reset the padding and margin *{

margin: 0;
padding: 0;

}
.first{width:100px;
height: 100px;
background-color: 
# c4c4;
}
.second {width: 100px;
height: 100px;
background-color: blueviolet;
}

Code language: CSS (css)

0 to

*{

margin: 0;
padding: 0;

}
.first{width:50vw;
height: 100px;
background-color: 
# c4c4;float: left;
}
.second {width: 50vw;
height: 100px;
background-color: blueviolet;
float: right;
}

Code language: CSS (css)

1

Create a div element with the class name parent. Add two to three div elements inside the parent div with the class names child1 and child2, or Child3 as many as you have created.

Code inside the index.html file should look like this,

<!doctype HTML> <html>

<head>
    <title>codedamn HTML Playground</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--- Link to flexbox.css---->
    <link rel="stylesheet" href="css/flexbox.css" />
</head>
<body>   
    <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    </div>
    <script src="https://bit.ly/codedamn-web-console"></script>
    <script src="/script.js"></script>
</body>

</html>

Code language: HTML, XML (xml)

Inside the flexbox.css file, we need to make the parent height and width larger so child elements can breathe,

Then on the parent div, add the `display: flex`. Parent div will align the children’s elements side by side.

The default direction for the flex is row, so if you ever want to align divs top to bottom, add `flex-direction: column` after adding `display: flex`.

The direction will change from row to column.

Code inside the flexbox.css file should look like this,

*{

margin: 0;
padding: 0;
box-sizing: border-box;

}
.parent {width: 100vw;
height: 100vh;
/* Aligns the children items in a row direction */
display: flex;
}
.child1{width: 100px;
height: 100px;
background-color: violet;
}
.child2{width: 100px;
height: 100px;
background-color: blue;
}

Code language: CSS (css)

Grid

Grid is best if you want to work with columns. Using the grid, we can create a complex layout.

I’m not making any changes inside the `index.html` file.

Open the `grid.css` file. Inside the grid.css file, On the parent container, we will call the `display: grid` property and `grid-template-columns: 1fr 1fr`

1fr means one fraction. If you want to create three columns, write 1fr three times.

grid.css file should look like this,

.parent{

display: grid;
grid-template-columns: 1fr 1fr;

}
.child1{width: 100px;
height: 100px;
background-color: blanchedalmond;
}
.child2{width: 100px;
height: 100px;
background-color: brown;
}

Code language: CSS (css)

Inline-block

If we want to align divs side by side using inline-block, we need to call the `inline-block` property on the child elements,

What is the difference between inline, block, and inline-block?

Inline elements do not affect height and width, just like span tags.

Block element will take the whole width of the container.

Inline-block element formatted as an inline element, but it will have height and width effect.

Change the CSS file path to the

*{

margin: 0;
padding: 0;

}
.first{width:50vw;
height: 100px;
background-color: 
# c4c4;float: left;
}
.second {width: 50vw;
height: 100px;
background-color: blueviolet;
float: right;
}

Code language: CSS (css)

4 file.

Make sure we have a parent container; inside that container, create two to three child divs.

Inside the

*{

margin: 0;
padding: 0;

}
.first{width:50vw;
height: 100px;
background-color: 
# c4c4;float: left;
}
.second {width: 50vw;
height: 100px;
background-color: blueviolet;
float: right;
}

Code language: CSS (css)

4 file, the parent container will call

*{

margin: 0;
padding: 0;

}
.first{width:50vw;
height: 100px;
background-color: 
# c4c4;float: left;
}
.second {width: 50vw;
height: 100px;
background-color: blueviolet;
float: right;
}

Code language: CSS (css)

6 to center the child element, and we will `display: inline-block` property on the child elements.

The

*{

margin: 0;
padding: 0;

}
.first{width:50vw;
height: 100px;
background-color: 
# c4c4;float: left;
}
.second {width: 50vw;
height: 100px;
background-color: blueviolet;
float: right;
}

Code language: CSS (css)

4 the file should look like this.

.parent{

 text-align: center;;

 }
.child1{width: 100px;
height: 100px;
background-color: rgb(24, 82, 82);
display: inline-block; 
}
.child2{width: 100px;
height: 100px;
background-color: rgb(27, 102, 18);
display: inline-block; 
}

Code language: CSS (css)

Inline-flex & Inline-Grid

Using Inline-flex:

Aligning the divs side by using inline-flex is one of the easiest methods. You can need to call

*{

margin: 0;
padding: 0;

}
.first{width:50vw;
height: 100px;
background-color: 
# c4c4;float: left;
}
.second {width: 50vw;
height: 100px;
background-color: blueviolet;
float: right;
}

Code language: CSS (css)

8 on the parent container. That’s it.

Inside the index.html file, change the CSS file path to

*{

margin: 0;
padding: 0;

}
.first{width:50vw;
height: 100px;
background-color: 
# c4c4;float: left;
}
.second {width: 50vw;
height: 100px;
background-color: blueviolet;
float: right;
}

Code language: CSS (css)

9

Inside the CSS file, on the parent container, write

<!doctype HTML> <html>

<head>
    <title>codedamn HTML Playground</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--- Link to flexbox.css---->
    <link rel="stylesheet" href="css/flexbox.css" />
</head>
<body>   
    <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    </div>
    <script src="https://bit.ly/codedamn-web-console"></script>
    <script src="/script.js"></script>
</body>

</html>

Code language: HTML, XML (xml)

0. That’s it, and all the child elements align side by side.

The code for aligning div side by side using

*{

margin: 0;
padding: 0;

}
.first{width:50vw;
height: 100px;
background-color: 
# c4c4;float: left;
}
.second {width: 50vw;
height: 100px;
background-color: blueviolet;
float: right;
}

Code language: CSS (css)

8

.parent{

display: inline-flex;

}
.child1{width: 100px;
height: 100px;
background-color: tomato;
}
.child2{width: 100px;
height: 100px;
background-color: yellowgreen;
}

Code language: CSS (css)

Using Inline-grid:

The inline-grid property will display the parent container as the inline-grid level container, so it works exactly as a grid container.

On the parent container, call the

<!doctype HTML> <html>

<head>
    <title>codedamn HTML Playground</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--- Link to flexbox.css---->
    <link rel="stylesheet" href="css/flexbox.css" />
</head>
<body>   
    <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    </div>
    <script src="https://bit.ly/codedamn-web-console"></script>
    <script src="/script.js"></script>
</body>

</html>

Code language: HTML, XML (xml)

2 property, which will align the items in a column.

Now use

<!doctype HTML> <html>

<head>
    <title>codedamn HTML Playground</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--- Link to flexbox.css---->
    <link rel="stylesheet" href="css/flexbox.css" />
</head>
<body>   
    <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    </div>
    <script src="https://bit.ly/codedamn-web-console"></script>
    <script src="/script.js"></script>
</body>

</html>

Code language: HTML, XML (xml)

3 to create two columns. As I have said above, you can write 1fr as many columns as you want.

code for inline-grid,

.parent{

display: inline-grid;
grid-template-columns: 1fr 1fr;

}
.child1{width: 100px;
height: 100px;
background-color: tomato;
}
.child2{width: 100px;
height: 100px;
background-color: yellowgreen;
}

Code language: CSS (css)

Summary

I think you can easily align the divs side by side using those five CSS properties. If you want to learn CSS for free, check out the course by codedamn.

Thanks for reading

Become The Best Frontend Developer 🚀

Take a look at Codedamn's frontend learning path. It is the best way to start your frontend web developer journey and become an employable developer. Thousands of companies today need frontend developers learning about JavaScript, React, and more.

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

Use z-index to stack the "popup" one above the other one (give it a higher value for z-index ). If you want to make it look like the inner div is really floating above the other one, create a shadow with something like border-right:2px solid black and border-bottom:2px solid black .

How do you overlay a div on another div in react?

Creating an overlay effect for two <div> elements can be easily done with CSS. This can be done with the combination of the CSS position and z-index properties. The z-index of an element defines its order inside a stacking context.

How to stack div above another div?

The Solution If you have multiple items, you can change the stacking order of items using the z-index property. A new stacking context is created by an element when the element has a position value of relative or absolute and the z-index value is not auto , which is the default value.

How do I hover a div over another div?

Using Z-index property The z-index property of CSS can be used to overlay one div over another. Add z-index value to the div element with position attributes. The z-index determine the order in which div stacks.

mẹo hay Top List Top Div on top Floating div