2

If i have the following HTML snippet

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

How can I create CSS such that the <div>above or below</div> could be positioned above or below <div>content</div> without having to add repetitive markup and without affecting the document flow?

I have tried using position: relative; on the fieldset and then position: absolute; on the field div but the element then sits over any elements below it.

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
Neil Stevens
  • 3,534
  • 6
  • 42
  • 71

1 Answers1

2

One option you have would be to use display: flex and flex-direction in order to visually reverse the order of the two elements: 

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>

You can also use display: flex and order if you need to add more elements into 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>
Maharkus
  • 2,841
  • 21
  • 35