Menu
Is it possible to "move" one full width element that is below another one so that it appears to be above by only using CSS/HTML? (and not changing the markup order)
<div id="first">first</div>
<div id="second">second</div>
#first {…}
#second {…}
Desirable result:
second first
666
If you want to place them next to each other you would require to use a CSS property float. As the name goes the float property specifies how an element should float in the webpage on the left or the right!. Values that a float property can have areas below, left - The element will float left w.r.t to its container.
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
You can use CSS Flexible Boxes for this. Specifically the order property.
In this example I've added width and background-color to help visualize. Please note that browser support for CSS flexible boxes is limited to modern browsers such as IE 10+, Chrome 21+, Firefox 20+ and may not work well in mobile browsers (especially older ones).
.container {
display: flex;
flex-direction: column;
}
#first {
order: 2;
width: 10em;
margin-top: 1em;
background-color: orange;
}
#second {
order: 1;
width: 10em;
background-color: yellow;
}<div class='container'>
<div id=first>
first
</div>
<div id=second>
second
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
