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

Question

Изменение порядка элементов 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 всегда сбивает с толку *^%$ из меня. В качестве практического приложения я имею в виду https://crocodoc.com/docs/walkthrough/skinning/, поэтому я намерен сделать этот вопрос и ответить ценным для тех, кто использует этот сервис тоже.

1

javascript css iframe cross-domain crocodoc

Источник

user702275 23 дек '12 в 12:57

2 ответа

Другие вопросы по тегам javascript css iframe cross-domain crocodoc

user1077230 23 авг '14 в 14:12 2014-08-23 14:12 · Answer 1 · 2014-08-23 14:12

Я довольно поздно на вечеринку, но я просто хочу, чтобы вы, ребята, знали, что вы действительно можете изменить порядок 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;
}

Удачи!

user1472389 23 дек '12 в 12:59 2012-12-23 12:59 · Answer 2 · 2012-12-23 12:59

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

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