'CSS, how to bring a div to the top of its sibling elements while it's below in the HTML?

I have a div after some other divs and that's why it is not at the exact top of the viewport. But I want to bring it to the top without actually changing its position in HTML.

The HTML is like :

<div class = "some other divs"></div>
<div class = "some other divs"></div>
<div class = "some other divs"></div>
<div class = "some other divs"></div>

<div class = "main div"></div>
javascripthtmlcss


Solution 1:[1]

You could use css's flexbox and the order propriety of it, like so: 

body{
 display:flex;
 flex-direction:column;
 gap:2rem
}
/* just to have som visuals */
div{
  background-color:black;
  height:50px;
}

.main{
 background-color:red;
 /* bring it to the top */
 order:-1
}
<div class = "some other divs"></div>
<div class = "some other divs"></div>
<div class = "some other divs"></div>
<div class = "some other divs"></div>

<div class = "main div"></div>

Solution 2:[2]

yousoumar's answer is excellent! One another way is using from grid:

.container{
  display: grid;
}
.container div{
  width: 100%;
  height: 50px;
  border: solid green 1px;
}
.main{
  border: solid red !important;
  grid-row: 1 / 2;
}
<div class="container">
<div class = "some other divs">Item1</div>
<div class = "some other divs">Item2</div>
<div class = "some other divs">Item3</div>
<div class = "some other divs">Item4</div>

<div class = "main div">Item5</div>
</div>

Solution 3:[3]

You can set the stack postition of each div with the css property z-index:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Arman Ebrahimi
Solution 3 Frank

Related Questions