0

重なっているグリッド要素をその兄弟の前または後ろにレンダリングするように指定することはできますか?

.l-branding以下の私のコードは、 の後ろに divをレンダリングします.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 でさえこの問題を解決できるかどうかは完全にはわかりません。これは、あなたが求めているように、位置と z-index を使用して解決する必要があるだけだと思います。

于 2013-09-10T10:14:28.733 に答える