marshmallow marshmallow - 4 months ago 4
HTML Question

Float bottom and up

I am trying to make code from further down in the html show above code from above it by using CSS.

Basically my html is like this:

<div class="showbelow">
show below
</div>

<div class="showabove">
show above
</div>


I am wanting the showabove div to show above the showbelow div despite being below it in the html. Is there a way of doing this without using negative margins in the css? eg. giving showabove a negative top margin and show below a positive top margin? Both divs are 100% of the container.

Thanks in advance :)

Answer

There is a property order to place items on a specific place using flexbox.

See the following example:

.container {
  display:flex;
  flex-direction:column;
}
.container div {
  border:1px solid red;
}
.showabove {
  order:1;
}
.showbelow {
  order:2;
}
<div class="container">
  <div class="showbelow">show below</div>
  <div class="showabove">show above</div>
</div>

Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.
https://drafts.csswg.org/css-flexbox-1/#order-property

Be careful with using order:-1!

.container {
  display:flex;
  flex-direction:column;
}
.container div {
  border:1px solid red;
}
.showabove {
  order:-1;
}
<div class="container">
  <div class="showbelow">show below</div>
  <div class="showmiddle">show middle</div>
  <div class="showabove">show above</div>
</div>

Explanation: The order:-1 set the item on the first position of your container, because all the other items has per default order:0. It doesn't move the item before the previous item! In your case this solution is working but if you add more items it can be a problem and you have to set the order for each item on the container like the example abvove.