Question

是否可以使用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内容总是让* ^％$混淆了我。作为一个实际应用，我实际上指的是iframe that is generated with Crocodoc (https://crocodoc.com/docs/walkthrough/skinning/)所以我的意图是使这个问题和答案对使用这项服务的人也有价值。

Answer 1

我参加派对已经很晚了，但我只是想让你们知道你们实际上可以单独用CSS改变DOM命令。

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

那我们该怎么做呢？父级需要成为flexbox元素。例如：

（这里只使用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;
}

祝你好运！

Answer 2

您无法使用css更改DOM顺序。但是，您可以应用position: absolute; css样式，并根据需要设置顶部，底部，左侧，右侧样式来定位元素。

或许更好的情况是position: fixed; bottom: 0;将工具栏放在浏览器窗口的底部。

使用CSS更改DOM元素顺序（Crocodoc）

2 个答案: