1

CSSでDOM要素の順序を変更することは可能ですか? ツールバーをiframe のメイン コンテンツの上から下に変更したい iframe があります。

だからこれから：

<iframe>
<html>
  <body>
    <div id='toolbar'></div>
    <div id='main_content'></div>
    <div id='other_stuff'></div>
  </body>
</html>
</iframe>

これに：

<iframe>
<html>
  <body>
    <div id='main_content'></div>
    <div id='toolbar'></div>
    <div id='other_stuff'></div>
  </body>
</html>
</iframe>

CSS を使用してこれが不可能な場合、誰かが Javascript でこれを行う方法についてアドバイスできますか? iframe のコンテンツを操作すると、常に *^%$ が混乱します。実用的なアプリケーションとして、実際には Crocodoc (https://crocodoc.com/docs/walkthrough/skinning/) で生成された iframe を参照しているので、この質問と回答をこのサービスを使用するユーザーにとって価値のあるものにすることを意図しています。それも。

4

2 に答える 2

6

パーティーにはかなり遅れましたが、CSS だけで実際に DOM の順序を変更できることをお知らせしたいと思います。

これを行うには、CSS3 flexbox 構文を使用する必要があります。つまり、基本的に IE10+ です。私の場合は、モバイル向けのサイトを操作するために使用するため、多くの場合問題になりません。

では、どうすればよいのでしょうか。親はフレックスボックス要素になる必要があります。例えば：

(ここでは Webkit ベンダー プレフィックスのみを使用します。css は、それがなくても眩しいです)

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

次に、次のように順序を示して div を入れ替えます。

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

幸運を！

于 2014-08-23T14:12:44.663 に答える
1

css で DOM の順序を変更することはできません。ただし、CSS スタイルを適用し、position: absolute;必要に応じて上、下、左、右のスタイルを設定して要素を配置することもできます。

おそらく、あなたの場合はposition: fixed; bottom: 0;、ツールバーをブラウザー ウィンドウの下部に配置することをお勧めします。

于 2012-12-23T12:59:39.003 に答える