用CSS改变DOM元素顺序(鳄鱼)

Changing DOM element order with CSS (Crocodoc)

本文关键字：鳄鱼 顺序 元素 CSS 改变 DOM      更新时间：2023-09-26

是否可以用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内容总是让我感到困惑。作为一个实际应用，我实际上指的是与鳄鱼(https://crocodoc.com/docs/walkthrough/skinning/)生成的iframe，所以我的目的是使这个问题和答案对那些使用这个服务的人也有价值。

我来得太晚了，但我只是想让你们知道，实际上你可以单独使用CSS来改变DOM的顺序。

虽然要做到这一点，我们必须使用CSS3弹性语法。所以基本上IE10+，在我的情况下，通常不是问题，因为我用它来操作移动网站。

那么我们该怎么做呢?父元素需要成为一个flexbox元素。如:

(这里只使用webkit vendor前缀)。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;
}

祝你好运!

你不能用css改变DOM的顺序。但是，您可以应用position: absolute; css样式，并根据需要通过设置顶部，底部，左侧，右侧样式来定位元素。

也许在您的情况下更好的是position: fixed; bottom: 0;将您的工具栏定位在浏览器窗口的底部。

相关文章：