CODEWITHSUNDEEP
javascripthtmlcss
Utsav Meena
Utsav Meena

Reputation: 141

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>

Upvotes: 3

Views: 110

Answers (3)

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2297

Youssouf Oumar'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>

Upvotes: 1

Youssouf Oumar
Youssouf Oumar

Reputation: 45865

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>

Upvotes: 2

Frank
Frank

Reputation: 39

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

Upvotes: 0

Related Questions