HTML element position with CSS

Question

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.

Are you referring to above and below as depth, i.e: z-index or are you talking about a vertical position? — Jake
– Jake, Commented Jun 12, 2018 at 14:53

Maharkus · Accepted Answer · 2018-06-12 14:36:24Z

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>

edited Jun 12, 2018 at 14:36

answered Jun 12, 2018 at 14:30

Maharkus

2,89824 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neil Stevens Over a year ago

For some reason I could not get it to work with fieldset when I switched to a div it worked fine

Collectives™ on Stack Overflow

HTML element position with CSS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related