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

htmlcss

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining dropdowns, nav-pills, and separate links in Bootstrap 4 to create a seamless horizontal layout

Trying to achieve a layout in Firefox where everything is displayed in one single horizontal row. This includes the label Dropdown, dropdown box itself, bootstrap nav-pills menu, and separate link. Code snippet: (jsfiddle: https://jsfiddle.net/aq9Laaew/16 ...

csshtmlbootstrap-4

Enhance VideoJS using custom Ionic icons in a NextJS environment

I'm creating a platform for video content and I want to enhance the VideoJS player by incorporating icons from the Ionic set. However, as I typically use the <ion-icon/> tag to insert icons on my pages, I had to individually specify each icon&ap ...

cssnext.jsvideo.jsionicons

Ways to remove content that exceeds the boundaries of a div element

I am facing a challenge with a parent div that has a specified size. Inside this parent div, there are other child divs, and if any of those child divs start displaying their content outside of the parent div, I want to completely remove that div. I do not ...

cssblazor

Incorporate a website link into an isotope filter

My filter configuration is as follows: <ul class="filters filter-portfolio"> <li><a href="#" class="selected animated" data-animation="fadeInUp" data-filter="*">All</a></li> <li><a hre ...

jqueryhtmljquery-isotope

`Text-overflow ellipsis should function consistently across both Firefox and Chrome browsers`

A design has been created to showcase captions for articles and their respective statuses. The article name box has a fixed width, with text-overflow:ellipsis applied to trim excessively long names. Additionally, a light grey dotted line is added at the en ...

htmlcssgoogle-chromefirefoxellipsis

Retrieving the XML data from an uploaded file using PHP

How can I upload an XML file to my server and extract its content? Step 4: Writing each row from the XML file into a database. This is my current attempt: xml_import.php <?php if(isset($_POST["submit"])){ echo "Let's test"; $uploaddir ...

phpxmlhtml

How can I ensure that my data remains properly aligned in a row with 9 columns while utilizing bootstrap?

My approach to creating a row with 9 columns involved using custom CSS to set each column's width to 11.11%, resulting in equal distribution across the row. I then applied the "custom-column" class to populate the row data: .custom-column { widt ...

htmltwitter-bootstrapcss

Experience the full power of the bootstrap grid system with a unique feature: nested overflow-y scrolling

Struggling with the bootstrap grid and a nested div with overflow-y. I followed advice from this stack overflow post, attempting to add min-height:0 to the parent ancestor, but can't seem to make it work. View screenshot here - Chrome on the left, Fi ...

htmlcssbootstrap-4grid-layout

What is the best approach to increase the height of a div element dynamically

I've encountered an issue with a div tag containing an image that may exceed the screen size. When this happens, I want to increase the height of the div tag and have a footer displayed below it. Currently, my styling for the div tag looks like this: ...

htmlcss

HTML5 database error: Uncaught TypeError due to illegal invocation

When I test the code below in Chrome, I encounter an error: var db = openDatabase('foo', 1, 'foo', 1111); var sql = function(callback){ db.transaction(function(tx){ callback(tx.executeSql); }); }; sql(function(query){ ...

javascriptdatabasehtmlgoogle-chrome

Attempting to retrieve the value of "id" using a "for...of" loop

I am seeking assistance with my auditTime function. In the loop using "for . . of", each element of the div HTML collection with the class name "time-block" should be iterated through, and the number value of that div's id should be assigned to the va ...

javascripthtmljquerycss

What's the best way to ensure consistent spacing between a label and input field, regardless of the length of the text?

Imagine a scenario where there are 10 input fields, each preceded by a span tag on the left side indicating what should be entered. While working on this setup, I encountered an issue - how can I create a consistent space between the span tag and the input ...

formscsshtml

Experience a captivating Bootstrap 4 drop menu animation that emerges from beyond the borders of the page

I have a row that contains two divs, one with col-md-11 and the other with col-md-1. Inside the col-md-1 div, there is a dropdown that I want to animate. I am using animate css for the animation, but the issue is that the slideInRight animation starts from ...

htmlcssanimationbootstrap-4

Designing a uniquely shaped button

Is there a way to design a button with a slightly irregular shape? The current CSS for my button creates a basic rectangle like this: .btnclass { width:100; height:40; } However, I would like it to have a more unique appearance such as this: ...

css

Trouble with the Bootstrap navbar loading correctly

Recently I started using Bootstrap and decided to implement one of their templates. Everything is working fine, except for my navbar which is not loading correctly. It should look like this: Desired Navbar However, in both Chrome and Firefox, it appears l ...

htmlcsstwitter-bootstrap

Update the styling of each div element within a designated list

Looking for a way to assist my colorblind friend, I am attempting to write a script. This is the layout of the page he is on: <div class="message-pane-wrapper candy-has-subject"> <ul class="message-pane"> <li><div style=" ...

javascripthtmlcss

Showing JSON data stored in Local Storage

My goal is to retrieve a JSON object from local storage in the web browser and then display the values. While I am able to save the JSON object and add new data to it, I am struggling with the logic required to fetch and show it. For context, the variable ...

jqueryjsonhtmllocal-storagelocal

Creating a loader for a specific component in Angular based on the view

Creating a loader for each component view is crucial when loading data from an API. Here is the current structure of my components within my <app-main></app-main>: <app-banner></app-banner> <app-data></app-data> <app ...

htmlcssangularcomponentsloader

Transitioning between carousel slides will reveal a clean white backdrop

I'm currently facing an issue with my html website. It seems that when I navigate through the carousel slides on my Bootstrap-5 based site, white spaces keep popping up. How can I resolve this issue? Here is a snippet of my code: HTML <!doctype h ...

htmljquerycssbootstrap-5

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Wouldn't it be cool to have a magic line that follows your mouse as you navigate through the header menu? Take a look at this example: It works seamlessly and smoothly. I tried implementing a similar jQuery script myself, but it's not as smoot ...

javascriptjqueryhtmlcss