Question

是否可以指定要在其兄弟姐妹的前面或后面呈现的重叠网格元素？

下面的代码会在.l-branding后面显示.l-header div。我在源订单中.l-branding之前需要.l-header，因此它会在移动设备上呈现.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＆amp; $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。快速预览它的外观是here on CodePen。

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

如何使用Singularity GS在重叠的兄弟元素的前面或后面渲染网格元素

1 个答案: