ページに複数のdivがある場合は、CSSを使用してサイズを調整し、浮動させて少し動かすことができますが、最初のdivが近くに表示されるページの上部と最後のdivが底に近いでしょう！ソースHTMLから来た要素の順序を完全にオーバーライドすることはできません。CSSはページ上のHTML要素の順序を本当に上書きできますか？
「CSSファイルを編集するだけでウェブサイト全体の見た目を変えることができます」と言われていますが、それでも同じ順番でdivが必要です。
は（P.S.私は誰もがページ上のすべての要素にposition:absoluteを使用していないことを確認しています。）
浮動小数点で絶対位置を指定すると、ページの順序の一部を変更するためのかなり良いポジションマジックを取得できます。
たとえば、マークアップが正しく設定されていれば、タイトルと本文のコンテンツはマークアップの最初の2つのアイテムになり、ナビゲーション/検索、最後に右側のサイドバーになります。これは、ナビゲーションを保持するのに十分な大きさの上マージンとサイドバーを保持するのに十分な大きさの右マージンを持つコンテンツコンテナを持つことによって行われます。それで両方とも絶対に正しい位置に置くことができました。
<h1> Stack Overflow </h1>
<div id="content">
<h2> Can Css truly blah blah? </h2>
...
</div>
<div id="nav">
<ul class="main"><li>quiestions</li> ... </ul>
....
</div>
<div id="side">
<div class="box">
<h3> Sponsored By </h3>
<h4> Lew Zelands fish market </h4>
....
</div>
</div>
そして、ここで重要なのは、マークアップは心の中で魔法を配置するこの種で行わなければならないことである
h1 { position: absolute; top: 0; left: 0; }
#content { margin-top: 100px; margin-right: 250px; }
#nav { position: absolute; top: 0; left: 300px; }
#side { position: absolute; right: 0; top: 100px; }
のようなCSSマークアップは、次のようになります。
navbarが左側にあり、navの下のサイドバーが動きにくくなるように変更します。
あなたが位置する必要はありません：あなたがやりたいすべての要素に絶対。
あなたはいくつかの重要な項目にそれを使用して、必要な場所に配置して、その中に含まれるすべての項目をセクションのルート要素と共に移動することができます。
CSSは、通常のフローから要素を取り出して、任意の方法で任意の位置に配置できます。しかし、それは新しいフローを作成することはできません。
これは、ページ/ウィンドウの先頭と最後にhtmlドキュメントの最後の項目を配置することができ、ページの最後/最後にhtmlドキュメントの最初の項目を配置できることを意味します。窓。しかし、これを行うと、これらのアイテムを相対的に配置することはできません。 HTML文書の最初の項目が正しく配置されるまでのページの終わりまでの距離を自分で知る必要があります。そのコンテンツが動的である（すなわち、データベースまたはCMSからの）場合、これは自明ではありません。
あなたが望むことを行う優れた例については、CSS Zen Gardenをご覧ください。右のリンクをクリックすると、さまざまな方法で厳密にCSSを使用してすべてを移動するためのサンプルレイアウトが豊富に用意されています。
私は最も重要な要素は、意味的な意味であなたのhtml要素を配置することだと思うし、運があればあなたのレイアウトはあまりにも多くの作業をする必要はありません。たとえば、サイトのヘッダーがページの最初の要素になり、一般的なナビゲーション、サブナビゲーション、コンテンツ、およびフッター（不完全なリスト）が続きます。
恐らくあなたがやりたいレイアウトの90〜95％は、そのマークアップをあなたの後のようなものに操作するのは比較的簡単です。もう少し努力しても5〜10％は可能ですが、自分自身に質問する必要があるのは、「サイトのヘッダーをページの右下に配置する頻度はどれくらいですか」です。
私は、サイトのレイアウトが、少なくとも、地面にあるコードと比較して、ルックアンドフィールを劇的に変えたいと思うなら、事実の後に操作するのは難しくありません。ヘッダについて
</2C >
良い点は、常に最初と最後のフッタています！しかし、私は広告DIVを上から右に移動したいと思うかもしれません。
私が聞いたことは、コンテンツDIVを最初に置くことです.Googleはあなたにもっと注意を払います（関連性の高いキーワードはページスコアの上位にあります）...それは神話ですか？これを行うには、私がお探しのCSSトリックが必要です。
Googleがページをどのように見ているのかとは別に、あなたのコンテンツを最初に置くのは悪い考えではありません。最初に読み込まれ、スクリーンリーダーが最初にヒットします。アクセシビリティには明らかです。 – nickf
position：absoluteを使用して、ソースの順序とは無関係に個々のボックスを完全に配置することができます。したがって、ヘッダをページの下に移動し、フッターをCSSを使用して上に移動できます。
アクセシビリティのためにこれは一般的に悪いことですが、読者に提示するのと同じ順序でソースのコンテンツの順序を多かれ少なかれにする必要があります。その理由は、スクリーンリーダーや同様のデバイスが、CSSで定義された視覚的な順序ではなく、ソースで定義された順序でコンテンツを表示するからです。
今日はいくつかの方法があります。一つ目は、よりブラウザ上で動作しますが、より制限されています。
table-caption、table-rowとtable-cellのCSSの表示値を使用してCSSを排他的に制御高々三つの要素の垂直方向の順序付けを可能にします。
これは最近のすべての最新のブラウザでのみ機能します（はい、IE9では失敗します）：flexbox CSSプロパティの使用。
「this is responsive」パターンページで実際のサンプルを表示し、これらの手法の詳細を読むことができます。私が話している2つは、「ソース - 注文のシフト」というタイトルのセクションにあります。
CSSはスタイル、htmlはデザイン+スタイルです。要素の順序は、一般にデザインタスクであり、スタイルタスクではありません。しかし、Adaptive Designはこのルールを破る可能性があります。 –
@PeterRader HTMLは構造体用です。それをデザインと呼ぶのは間違いです。デザインには、構造、スタイル、および動作が含まれます。これは、それぞれHTML、CSS、およびJavaScriptによって処理されます。 – spex
ありがとうございました。はい、その小さな行動とミスリーディング。 –