css: how to bring a div to the top of the viewport-CodePudding

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>

CodePudding user response：

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{
  border:1px solid;
  height:200px;
}

.main{
 border-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>

CodePudding user response：

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

CodePudding user response：

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 >
<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>