Tengo un div después de otros divs y es por eso que no está exactamente en la parte superior de la ventana gráfica. Pero quiero llevarlo a la parte superior sin cambiar su posición en HTML.
El HTML es como:
<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>¡La respuesta de yousoumar es excelente! Otra forma es usar 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>Puede usar el flexbox de css y la propiedad de order del mismo, así:
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>Puede establecer la posición de la pila de cada div con la propiedad css z-index: