Move divs vertically within a larger div - html

Question

I am making an animation that involves a set of four divs inside one larger div. The four divs are too large to all fit in the one div at once, so I want to be able to specify the position at which the larger div should start. For example, here I have four boxes inside the div. From top to bottom, the boxes are green, purple, pink, and blue (you can't see the blue in the current jsfiddle because it is cut off). I would like the BOTTOM of the larger fulldisplay div to align with the MIDDLE of the blue box, and everything else to fit above hat until it is cut off at the top of the div. Eventually I am going to be implementing a custom-made scroll button (as I don't want it to look like the overflow:scroll one) but for now I am just trying to get CSS to display the inner divs the way I want.
JS FIDDLE: http://jsfiddle.net/o33gw35w/
CSS:
body {padding: 0; margin: 0; height: 100%; overflow: hidden; font-family: Helvetica;}
.nameblock {
height:10%;
width: 30%;
position: absolute;
background-color: yellow;
}
.fulldisplay {
height:90%;
width: 30%;
position: absolute;
overflow: hidden ;
}
.spacer1 {
height:40%;
position: relative;
background-color: green;
}
.spacer2{
height:40%;
position: relative;
background-color: purple;
}
.spacer3 {
height:40%;
position: relative;
background-color: pink;
}
.spacer4{
height:40%;
position: relative;
background-color: blue;
}
HTML:
<div class="nameblock"></div><br/>
<div class="fulldisplay">
<div class="spacer1">
</div>
<div class="spacer2">
</div>
<div class="spacer3"></div>
<div class="spacer4"></div>
</div>
</body>

Answer 1

Apologize if I got the question wrong as I am not quite sure what you are trying to do, but if you want to have a way of ordering s dynamically, you could use css flexbox to do so. You might need to tweak the classes to have correct width and height (eg. width: 100%; height: 150px;) and define flex container as similar to below snippet.
.fullconversation {
padding: 0;
margin: 0;
list-style: none;
width: 30%;
display: flex;
flex-direction: row;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
and then
.spacer4{
width: 100%;
height: 150px;
position: relative;
background-color: blue;
order: -1;
}
For more information about flexbox, please refer to the urls below or feel free to ask any questions regarding flexbox or css. Hope this helps.
https://css-tricks.com/almanac/properties/o/order/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
***********Updated************
If you change the height of spacer1 to be 10%, then you will see the blue box visible at the bottom. Note that the value 10% is just an example, as long as the total size of the heights of inner s dose not take up more than 100%, the blue box will be visible.
.spacer1 {
height:10%;
position: relative;
background-color: green;
}
Also, if you want to see all divs regardless of the size, you could just set overflow to other than hidden.