.containing-block
.static-positioned-block I am a statically positioned annd contained by the content-box.
.absolute-positioned-block I am absolutely positioned and contained by the padding-box.
View Compiled
.containing-block {
position: relative;
width: 200px;
height: 100px;
padding: 100px;
background-color: green;
border: 2px solid black;
margin: 50px;
}
.static-positioned-block {
background-color: pink;
box-sizing: border-box;
border: 1px solid black;
width: 100%;
height: 100%;
padding: 20px;
}
.absolute-positioned-block {
position: absolute;
background-color: coral;
top: 0;
left: 0;
width: 50%;
padding: 20px;
border: 1px solid black;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.