KandZ – Tuts

We like to help…!

CSS 15 💻 position property

position static and relative  
position → controls the positioning of an element in a page.
values → static, relative, absolute, fixed, sticky and global values
static → default. Elements remain in their normal flow. 
Positional properties are not taken into account, top, right, bottom, left and z-index
relative → the element is positioned relative to their normal position.
With top, right, left and right you specify its offset for its natural position

position fixed, sticky and absolute
fixed → the element is removed from its normal flow.
top, right, bottom and left specify the position relative to the viewport
sticky → the element behaves like relative...
until it reaches a certain threshold, top or bottom...
then it becomes fixed relative to its parent or html element
absolute → the element is removed from its normal flow and is positioned relative to its parent
top, right, left and bottom specify its offset from its parent

15 – position property

<div class="static">This div is statically positioned.</div>
<div class="relative">This div is positioned relative to its normal flow.</div>
 <div class="absolute">This div is positioned absolutely relative to its nearest positioned ancestor or the `<html>` root.</div>
<div class="fixed">This div is positioned fixed relative to the viewport.</div>
<div class="sticky">This div is positioned sticky relative to its nearest positioned ancestor or the `<html>` root.</div>
.static {
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

 .relative {
    position: relative;
    top: 20px;
    left: 50%;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

.absolute {
    position: absolute;
    top: 20px;
    left: 50%;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

.fixed {
    position: fixed;
    top: 20px;
    left: 50%;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

.sticky {
    position: sticky;
    top: 20px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

Leave a Reply