Changing position relative the other tags in css

I have 3 boxes on my page. The second (red) has to be fixed position. If the height of the green box increases, it has to increase to the top side, not to the bottom. So red one's position has to be fixed. Also if the red one's height increases, yellow has to move forward to the bottom. How can i do that?

enter image description here

Here is my css and html code:

#div1 {position:relative;top:0;bottom:0;right:0;background:green;width:100px;height:100px;}
#div2 {width:100px;height:140px;position:absolu;bottom:0;left:0;background:red;}
#div3 {width:100px;height:100px;position:relative;top:0;right:0;background:yellow;}

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
  
</head>
<body>
<!-- Start your code here -->
  
   <div class="parent">
       <div id="div1"></div>
       <div id="div2"></div>
       <div id="div3"></div>
</div>


<!-- End your code here -->
</body>
</html>

This is possible with simple CSS using a few positioning tricks. First off, since everything orients around your red div, you need this to be the cornerstone. Setting this div to a relative position and inserting the remaining divs as children will allow all of its children to be positioned absolute relative to the parents location.

Because using absolute positioning as a percent will base off of the relative positioned parents size, we can use this to always attach the bottom div off of its base with position:absolute;top:100%. This places the child div at 100% distance from the top of your parent div.

Under that same logic, we can place a div always at the top of the parent using position:absolute;bottom:100%;

Note: I've changed your ID's to classes to allow multiple examples

.div1 {
  width:100px;
  height:140px;
  position:relative;
  top:200px;
  background:red;
  /* ignore this in a real case, these allow multiple examples to stack nicely*/
  float:left;
  margin-left: 5px;
}
.div2 {
  width:100px;
  position:absolute;
  bottom:100%;
  background-color:green;
} 
.div3 {
  width:100px;
  position:absolute;
  top:100%;
  background:yellow;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->

  <div class="div1">
    <div class="div2" style="height:100px;"></div>
    <div class="div3" style="height:100px;"></div>
  </div>
  <div class="div1">
    <div class="div2" style="height:200px;"></div>
    <div class="div3" style="height:200px;"></div>
  </div>
  <div class="div1" style="height:190px">
    <div class="div2" style="height:120px;"></div>
    <div class="div3" style="height:227px;"></div>
  </div>
  <div class="div1" style="height:190px">
    <div class="div2" style="height:20px;"></div>
    <div class="div3" style="height:360px;"></div>
  </div>
  
<!-- End your code here -->
</body>
</html>

When in doubt, create more parent or wrapper elements around the elements you want to manipulate.

* {
  box-sizing: border-box;
}

.parent {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 5px solid #0000ffc0;
  width: 100%; 
  height: auto;
}

#div1-wrapper {
  border: 2px solid lime;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
}

#div1 {
  position: absolute;
  bottom: 0px;
  left: 0;
  background: green;
  width: 100px;
  height: 20vh;
}

#div2-wrapper {
  border: 2px solid #ff3300;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 30vh;
}

#div2 {       
  width:100px;
  height: 30vh;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
}

#div3-wrapper {
  border: 2px solid #ffff00;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
}

#div3 {
  width: 100px; 
  height: 100%;
  position: relative;
  top: 0;
  right: 0;
  background: yellow;
}

<body>
<!-- Start your code here -->
  
   <div class="parent">
     <div id="div1-wrapper">
       <div id="div1"></div>
     </div>
     <div id=div2-wrapper>
       <div id="div2"></div>
     </div>
     <div id=div3-wrapper>
       <div id="div3"></div>
     </div>
  </div>

I created a wrapper around each of the elements named #div. The wrapper around #div1 is #div1-wrapper, and then #div2-wrapper, and so on...

Just to make sure that you overwrite any native browser position styling, give position: relative to each wrapper. With a top: 0 and left: 0. This will make sure that each element begins on the far left of the .parent element and each one begins just after the end of the last one.

If you want #div1 to grow and shrink with the size of the screen, give it a height in vh instead of pixels. #div1's outer wrapper should be position: relative, but the #div1 element itself should be position: absolute. (If you try to set its position to relative, it will stick to the top of its wrapper, rather than the bottom, as you want.

You said you wanted the red div (#div2) to be fixed from the top, but able to grow and shrink underneath. To achieve this, you need to set the position of #div2 to absolute, sitting inside of a position: relative wrapper.

You also need to make sure that it's wrapper (#div2-wrapper) has a height set in vh, instead of pixels. That way, the whole outer wrapper will grow and shrink. And to have the inner element (#div2) grow and shrink with it, set its height to 100% of the parent.

Next, set the #div3-wrapper to position relative and a set height of your choosing (in this case, 100px).

And lastly, set the #div3 (yellow div) to height: 100%;

To make the interactions more clear, I gave the outermost .parent element a blue border, and I gave each #div-wrapper a border color that matches the inner #div and I set box-sizing: border box on all elements.

Changing position relative the other tags in css

Related

Recent Posts