0

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

我下面的代码将.l-branding呈现.l-header. 我需要在源顺序.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;andz-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;
    }
}
4

1 回答 1

1

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

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

于 2013-09-10T10:14:28.733 回答