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