Положение HTML-элемента с помощью CSS - PullRequest
Новая
       18

Положение HTML-элемента с помощью CSS

0 голосов
/ 12 июня 2018

Если у меня есть следующий фрагмент HTML 

...
<fieldset>
  <div>above or below</div>
  <div>content</div>
</fieldset>
...

Как я могу создать CSS так, чтобы <div>above or below</div> мог быть расположен выше или ниже <div>content</div> без добавления повторяющейся разметки и без влияния на документflow?

Я пытался использовать position: relative; для fieldset, а затем position: absolute; для поля div, но затем элемент размещается над любыми элементами под ним.

1 Ответ

0 голосов
/ 12 июня 2018

Один из возможных вариантов - использовать display: flex и flex-direction для визуального изменения порядка двух элементов: 

fieldset {
display: flex;
flex-direction: column;
}

.below {
flex-direction: column-reverse;
}
<fieldset>
  <div>above or below</div>
  <div>content</div>
</fieldset>

<fieldset class="below">
  <div>above or below</div>
  <div>content</div>
</fieldset>

Вы также можете использовать display: flex и order, если вам нужно добавить больше элементов в fieldset: 

fieldset {
  display: flex;
  flex-direction: column;
}

.first {
  order: 1;
}

div {
  order: 2;
}
<fieldset>
  <div>above or below</div>
  <div>content</div>
  <div>other stuff</div>
  <div>other stuff</div>
</fieldset>

<fieldset>
  <div>above or below</div>
  <div class="first">content</div>
  <div>other stuff</div>
  <div>other stuff</div>
</fieldset>
...