Изменение порядка элементов DOM с помощью CSS (Crocodoc)

Можно ли изменить порядок элементов DOM с помощью CSS? У меня есть 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, который генерируется с помощью Crocodoc (https://crocodoc.com/docs/walkthrough/skinning/), поэтому я намерен сделать этот вопрос и отвечают ценным для тех, кто использует эту услугу.

Ответ 1

Я опаздываю на вечеринку, но я просто хочу, чтобы вы, ребята, знали, что на самом деле вы можете изменить порядок DOM с помощью CSS.

Хотя для этого нам нужно использовать синтаксис 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

Вы не можете изменить порядок DOM с помощью css. Однако вы можете применить стиль position: absolute; css и поместить элемент, установив по мере необходимости верхний, нижний, левый и правый стили.

Возможно, лучше в вашем случае было бы position: fixed; bottom: 0; разместить вашу панель инструментов в нижней части окна браузера.