Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div
above another div
This can be done with CSS only!
Please check my answer to this similar question:
https://stackoverflow.com/a/25462829/1077230
I don't want to double post my answer but the short of it is that the parent needs to become a flexbox element. Eg:
(only using the webkit vendor prefix here.)
#main {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
Then, swap divs around by indicating their order with:
#main > div#one{
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
overflow:visible;
}
#main > div#two{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
It is easy with css, just use display:block
and z-index
property
Here is an example:
HTML:
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
</body>
CSS:
.wrapper
{
[...]
}
.header
{
[...]
z-index:9001;
display:block;
[...]
}
.content
{
[...]
z-index:9000;
[...]
}
Edit: It is good to set some background-color
to the div-s
to see things properly.
Here's a solution:
<style>
#firstDiv {
position:absolute; top:100%;
}
#wrapper {
position:relative;
}
But I suspect you have some content that follows the wrapper div...
This solution uses only CSS and works with variable content
#wrapper { display: table; }
#firstDiv { display: table-footer-group; }
#secondDiv { display: table-header-group; }
Or set an absolute position to the element and work off the margins by declaring them from the edge of the page rather than the edge of the object. Use % as its more suitable for other screen sizes ect. This is how i overcame the issue...Thanks, hope its what your looking for...
I was looking for a way to change the orders of the divs only for mobile version so then I can style it nicely. Thanks to nickf reply I got to make this piece of code which worked well for what I wanted, so i though of sharing it with you guys:
// changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
if ( jQuery(window).width() < 480 )
{
jQuery('#main-content').insertBefore('#sidebar');
}
if ( jQuery(window).width() > 480 )
{
jQuery('#sidebar').insertBefore('#main-content');
}
jQuery(window).height(); // New height
jQuery(window).width(); // New width
});