// relative: Positions the element relative to its normal positon and will leave a gap at its normal position * /
// position: relative; * /
// absolute: Positions the element relative to the positon of its first parent * /
// position: absolute; * /
// top: 34px; left: 134px; * /
// fixed: Positions the element relative to the browser window; * /
// position: fixed;
//right: 4px; bottom: 2px * /
// sticky
// position:sticky
// top:3pxThe element is removed from the normal document flow, and no space is created
for the element in the page layout. It is positioned relative to its closest
positioned ancestor, if any; otherwise, it is placed relative to the initial
containing block. Its final position is determined by the values of top, right,
bottom, and left.
.element {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative} /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute} /* Now you can play with it */An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.position: absolute;top: 50px;
position: absolute;
@media screen { h1#first { position: fixed; }}@media print { h1#first { position: static; }}
position: fixed;
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}.absolute{
position: absolute;
top: 0;
left: 0;
}