html - Keep red and blue boxes fixed in corners of container during horizontal scrolling -

using css, can keep red , blue boxes in respective corners while scrolling horizontally?

this container in center of page additional content on either side, don't think position: fixed viable option takes boxes out of flow of page.

is there way keep these boxes in top left , right corners of container while scroll?

jsfiddle

you take buttons , wrap them in container same shape. make div relative , position them absolutely within new container div.

<div class="container">   <div class="absolute-container">     <div class="stay_left"></div>     <div class="stay_right"></div>    </div> </div> 

the css new container:

.absolute-container{   width: 500px;   height: auto;   position: absolute; } 

and added lines buttons:

.stay_left{   //float: left;   position: absolute;   top: 0px;   left: 0px; } .stay_right{   //float: right;   position: absolute;   top: 0px;   right: 0px; } 

you can remove floats because no longer necessary.

jsfiddle