How can I reorder my divs using only CSS?

后端未结

关注

 24  1130

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

相关标签:

24条回答

抹茶落季

2020-11-22 02:02

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

0 讨论(0)

不思量自难忘°

2020-11-22 02:02

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.

0 讨论(0)

梦如初夏

2020-11-22 02:06
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...
0 讨论(0)
发布评论:

提交评论
- 加载中...
误落风尘

2020-11-22 02:09
This solution uses only CSS and works with variable content
```
#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
小鲜肉

2020-11-22 02:10

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

走了就别回头了

2020-11-22 02:11

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
});

0 讨论(0)