CODEWITHSUNDEEP
htmlcss
SomewhereDave
SomewhereDave

Reputation: 482

Can we display a HTML element at the end of the DOM somewhere further up the DOM instead?

I wonder if it is possible to display an HTML element somewhere at the end of the DOM somewhere further up the DOM instead (using CSS).

The element should still be placed with position:relative!

I created a "possible solution" with flexbox below to give you an idea of what I'm trying to achieve, but

I'm interested in a solution with position:relative, because I have to deal with an existing CSS setup based on this positioning paradigm.

.content {
  display: flex; 
  flex-direction: column;
 }

.content-piece {
  width: 100%;
  margin: 5px 0;
  border-style: solid;
  border-radius: 3px;
  border-width: 1px;
 }
 
 #bot {
  order: 1;
 }
 
 #top {
  order: 2;
 }
 
 #mid {
  order: 3;
 }
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Move bot to the top of body</title>
</head>
<body>
    <p>Goal: Make Bottom display above Top</p>
    <div class="content">
      <div class="content-piece" id="top">Top</div>
      <div class="content-piece" id="mid">Middle</div>
      <div class="content-piece" id="bot">Bottom</div>
    <div>
</body>
</html>

Upvotes: 1

Views: 556

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

defaut order is zero 0, to bring one at front, use -1 ;)

demo

.content {
  display: flex; 
  flex-direction: column;
 }

.content-piece {
  width: 100%;
  margin: 5px 0;
  border-style: solid;
  border-radius: 3px;
  border-width: 1px;
 }
 
 #bot {
  order: -1;
 } 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Move bot to the top of body</title>
</head>
<body>
    <p>Goal: Make Bottom display above Top</p>
    <div class="content">
      <div class="content-piece" id="top">Top</div>
      <div class="content-piece" id="mid">Middle</div>
      <div class="content-piece" id="bot">Bottom</div>
    <div>
</body>
</html>

or set the others to 1

.content {
  display: flex; 
  flex-direction: column;
 }

.content-piece {
  width: 100%;
  margin: 5px 0;
  border-style: solid;
  border-radius: 3px;
  border-width: 1px;
 }
 
 .content [id]:not(#bot) {
  order: 1;
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Move bot to the top of body</title>
</head>
<body>
    <p>Goal: Make Bottom display above Top</p>
    <div class="content">
      <div class="content-piece" id="top">Top</div>
      <div class="content-piece" id="mid">Middle</div>
      <div class="content-piece" id="bot">Bottom</div>
    <div>
</body>
</html>

There is no need to reset order for each in your case.

For the fun and not with position:relative (nor translate()) , here is a float behavior that could be used before flex or grid shown up.

.content-piece {
  border: solid;
  box-sizing: border-box;
  width: 100%;
}

.content::before {
  content: '';
  padding-top: 60px; /* equals height of #bot , can be retrieve via js and injected */
  float: left;
}

#bot {
  height: 60px;
  overflow: hidden;
  /* no float !! */
}

#top {
  float: left;
  clear: left;
  /* set it below the pseudo */
}

#mid {
  float: left;
  clear: left;
  /* if not wide enough to be  to pushed below previous float  */
}
<p>Goal: Make Bottom display above Top</p>
<div class="content">
  <div class="content-piece" id="top">Top</div>
  <div class="content-piece" id="mid">Middle</div>
  <div class="content-piece" id="bot">Bottom</div>
</div>

or if you really want position:relative, mix it with position sticky in a funny tricky use again not to use in real :

.content-piece {
  border: solid;
  box-sizing: border-box;
  width: 100%;
}
 .content {position:relative;border:solid;overflow:auto;}

#bot {
position:sticky; 
bottom:1500px;/* whatever is enough to push it up */
height:60px;
}
#top {
margin-top:60px;
}
 
 
<p>Goal: Make Bottom display above Top</p>
<div class="content">
  <div class="content-piece" id="top">Top</div>
  <div class="content-piece" id="mid">Middle</div>
  <div class="content-piece" id="bot">Bottom</div>
</div>

Flex is really not bad here ;).

Upvotes: 1

Related Questions