How can I reorder my divs using only CSS?

后端 未结 24 1114
傲寒
傲寒 2020-11-22 01:53

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)
提交回复
热议问题