Float from the bottom and then rise up

Question

Float from the bottom and then rise up

I'm attempting to use CSS to make code from further down in the HTML appear above code from a section above it.

Here is how my HTML structure looks:

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

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

I would like the content of the showabove div to display above the showbelow div, even though it appears below it in the HTML. Is there any way to achieve this without relying on negative margins in the CSS? For example, without setting a negative top margin for showabove and a positive top margin for showbelow? Both divs take up 100% of the container's width.

Thank you in advance :)

html css

Answer 1

Answer №1

Utilizing the order property in flexbox allows for precise item placement within a container.

Take a look at this 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 typically follow the same order as they appear in the source document. However, the order property can override this.
https://drafts.csswg.org/css-flexbox-1/#order-property

Exercise caution when 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: Setting order:-1 places the item first within the container due to all other items defaulting to order:0. It does not shift the item before the previous one! While this solution may work initially, adding more items could lead to complications, requiring you to set specific order values for each item within the container, as showcased in the example above.

Answer 2

Utilizing the order property in flexbox allows for precise item placement within a container.

Take a look at this 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 typically follow the same order as they appear in the source document. However, the order property can override this.
https://drafts.csswg.org/css-flexbox-1/#order-property

Exercise caution when 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: Setting order:-1 places the item first within the container due to all other items defaulting to order:0. It does not shift the item before the previous one! While this solution may work initially, adding more items could lead to complications, requiring you to set specific order values for each item within the container, as showcased in the example above.

Answer 3

Answer №2

Utilizing Flexbox, you have the ability to rearrange the order of elements. To accomplish this, simply apply order: -1 to the .showabove div.

body {
  display: flex;
  flex-direction: column;
}
.showabove {
  order: -1;
}

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

Answer 4

Utilizing Flexbox, you have the ability to rearrange the order of elements. To accomplish this, simply apply order: -1 to the .showabove div.

body {
  display: flex;
  flex-direction: column;
}
.showabove {
  order: -1;
}

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

Float from the bottom and then rise up

Answer №1

Answer №2

Similar questions

What is the process to create a sticky Material UI grid element?

Having trouble with uploading image files in Laravel Vue.js?

Using jQuery to Toggle Visibility of Table Rows

Retrieving data from an HTML input tag and storing it in a variable

Is there a way to make all Bootstrap column heights equal using only jQuery?

Interactive calendar feature displaying events upon hovering over a date

Adjusting the grid for various mobile screen sizes

Discover the name of a color using its HEX code or RGB values

Ensure each checkbox within a list is selected

CSS login validator immobilized

Tips for evenly and fully stretching a set number of horizontal navigation items across a designated container

Seeking particular section of online content in an asynchronous manner

Is there a way to include individual Facebook comments for each image within a jQuery lightbox?

Unveiling concealed content with JQuery

How can a block be made to stay fixed and float in a flexbox layout?

The Typescript Select is displaying an incorrect value

The video is not appearing on mobile devices using Safari, Firefox, and Chrome, but it is displaying properly on desktop computers

Top-to-Bottom Border Vanishing

What is the difference between finding the XPath of immediate child text and all descendant text?

Tips on how to loop a song continuously in jPlayer's circular mode