レイアウト - 絶対配置なしで最後のコーディングされたdivを表示します

Question

もしそうなら、後者を絶対位置指定なしで一番上にコード化して表示するにはどうすればいいですか？純粋なCSS（ieとj6のような古代のブラウザはありません私の懸念）？

それは私の記事のHTMLが存在する場所です原因私は（上部に見えるが、右または左&を去った後、コード化された）

1. メニューほとんどの一番上に（第1の符号化

2. 左（）3つの主要部品を必要F

申し訳ありませんが）

右（二次重要性のもの）または何も試してみることができなかったということは、存在していれば、無所属のポジショニングソリューションが存在するかどうかわからないからです。

「abs位置決めに何が問題なのですか？腹筋位置決めに何も問題はありませんが、私はただ学びたいだけです。

おかげで、よろしく

Answer 1

ターゲットブラウザがそれをhttp://caniuse.com/#search=flexboxをサポートしている場合は、簡単に、フレキシボックスを使用した要素の順序を変更することができます。

.container { 
 
    display: flex; 
 
    /* Flexbox defaults to a row layout, so we set it to column so the .content and .menu elements stack. */ 
 
    flex-direction: column; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    /* Distribute elements inside .content with respect to their space between the elements */ 
 
    justify-content: space-between; 
 
} 
 

 
.menu { 
 
    /* Forces the elements ordering to the top */ 
 
    order: -1; 
 
    width: 100%; 
 
    height: 80px; 
 
    background: #dedede; 
 
} 
 

 
.left, 
 
.right { 
 
    width: 100px; 
 
    height: 300px; 
 
    background: #aeaeae; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <div class="left"> 
 
     Left 
 
    </div> 
 
    <div class="right"> 
 
     Right 
 
    </div> 
 
    </div> 
 
    <div class="menu"> 
 
    Menu 
 
    </div> 
 
</div>

を