How CSS Positioning Works

« Go Back to the Tutorial

I am fixed (scroll the page)

background-color:#F6E4F5;
border:1px solid white;
padding:15px;
right:95px;
width:300px;
z-index:10;
position:fixed;
bottom:15px;

I am absolute inside fixed

background-color:#DCF4F9;
border:1px solid white;
padding:15px;
position:absolute;
right:-50px;
top:-90px;

I am a lonely absolute

background-color:#DCF9E1;
border:1px solid white;
padding:15px;
width:150px;
position:absolute;
top:0;
left:0;

I am relative (resize window)

background-color:#F8F7C3;
border:1px solid white;
width:200px;
padding:20px;
position:relative;
left:400px;

I am absolute inside relative

background-color:#F8D9C3;
border:1px solid white;
padding:20px;
position:absolute;
left:-180px;
bottom:-140px;