如何使用奇点 GS 在重叠的同级元素前面或后面渲染网格元素

Question

是否可以

指定在其同级元素的前面或后面呈现一个重叠的网格元素？

我下面的代码将呈现.l-header后面的.l-brandingdiv。我需要在.l-header源顺序之前.l-branding，以便它在手机上呈现高于.l-header（幻灯片）。

.HTML：

<div class="l-container">
    <div class="l-branding">
            <!-- logo -->
    </div>                  
    <div class="l-header">
        <!-- image slider -->               
    </div><!-- end .l-header -->
    <navigation class="l-navigation" role="navigation">             
        <!-- navigation -->             
    </navigation>

</div><!-- end .l-container -->

SCSS：我可以将position:absolute;和z-index:10用于$tab和$desk断点，但想知道是否有更好的方法。

///////////////////////////////////////////////////////////
//
// HEADER
//
///////////////////////////////////////////////////////////
.l-header-wrap {
    @include clearfix;
}
.l-header {
    @include grid-span(4,1);
    @include breakpoint($tab) {
        @include grid-span(12,1);
        min-height:$vert-spacing-unit * 5;
    }
    @include breakpoint($desk) {
        @include grid-span(18,1);
    }
}
///////////////////////////////////////////////////////////
//// BRANDING
///////////////////////////////////////////////////////////

.l-branding {
    @include grid-span(4,1);
    @include breakpoint($tab) {
        @include grid-span(11,1);
        //position: absolute;
        //top:1em;
    }
    @include breakpoint($desk) {
        @include grid-span(17,1);
    }
}
///////////////////////////////////////////////////////////
//// NAV
///////////////////////////////////////////////////////////

.l-navigation {
    @include grid-span(4,1);
    @include grid-background;
    @include breakpoint($tab) {
        @include grid-span(12,1);
        //margin-top:-100px;
        //position: absolute;
        //bottom:0;
    }
    @include breakpoint($desk) {
        @include grid-span(18,1);
        //margin-top:-100px;
    }
}

Answer 1

你不能用奇点本身来做到这一点，但可以用普通的CSS来完成。答案是你已经做了什么，绝对定位和z-index.在CodePen上可以快速预览它的外观。

我不完全确定即使是 Flexbox 是否会解决这个问题，我相信这只需要使用位置和 z-index 来解决，因为这就是你要求做的。