<div class="container">
<div class="container-caption"> height: 200px; position: static;</div>
<div class="box left top">
position: absolute;
top: 20px;
left: 20px;
</div>
<div class="box bottom right">
position: absolute;
bottom: 20px;
right: 20px;
</div>
</div>
.box {
background-color: darkorange;
border: 1px solid black;
width: 100px;
height: 100px;
position: absolute;
}
.container {
text-align: center;
background-color: lightgray;
border: 1px solid darkgray;
height: 200px;
width:100%;
position: static;
margin-top: 50px;
}
.top {
top: 20px;
}
.left {
left: 20px;
}
.bottom {
bottom: 20px;
}
.right {
right: 20px;
}
.container-caption {
position:fixed;
top:50px;
width:100%;
}
body {
padding-left: 40px;
padding-right: 40px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.