使用 CSS（Crocodoc）更改 DOM 元素顺序 [重复]答案

【问题标题】：Changing DOM element order with CSS (Crocodoc) [duplicate]使用 CSS（Crocodoc）更改 DOM 元素顺序 [重复]
【发布时间】：2012-12-10 06:32:25
【问题描述】：

是否可以使用 CSS 更改 DOM 元素顺序？我有一个 iframe，我想将工具栏从 above 更改为 below 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/)，所以我的目的是让这个问题和答案对那些使用这项服务的人也有价值。

【问题讨论】：

也许这样的东西可以工作：jsfiddle.net/znnaJ
@dfsq 谢谢我也会考虑...

标签： javascript css iframe cross-domain crocodoc

【解决方案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;
}

祝你好运！

【讨论】：

【解决方案2】：

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

在您的情况下，position: fixed; bottom: 0; 将您的工具栏放置在浏览器窗口的底部可能会更好。

【讨论】：

谢谢，是的，我想到了这一点，尽管这是一个不可持续的解决方案
哦，固定底部似乎更好......
也许 position: fixed 在你的情况下效果更好。使用 javascript 操作 dom 运行时也会产生 stange 效果。因为你必须等待 domReady。这意味着工具栏将显示在顶部，然后消失并移至底部。这可能会产生一些奇怪的效果。
同意 Javascript 也可能使它变得丑陋...理想情况下，我会按照自己的意愿渲染 DOM，但是挂断存在一个不相关的问题，即无法在 AJAX 请求中使用 Crocodoc's docviewer.js
好吧，我无法帮助你处理鳄鱼，不知道这件事:)