Scribd Logo
Upload

Welcome to Scribd!

  • CSS Layout - The Position Property

    Uploaded by

    ITs Me Prash
    7 views16 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views16 pages

    CSS Layout - The Position Property

    Uploaded by

    ITs Me Prash

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 16

    CSS position property

     The CSS position property is used to set position for an element.


     we can position an element using the top, bottom, left and right properties.
    There are five different position values:
     static
     relative
     fixed
     absolute
     Sticky
    CSS Static Positioning
     This is a by default position for HTML elements.
     It always positions an element according to the normal flow of the page.
     It is not affected by the top, bottom, left and right properties.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .parent {
    position: static;
    border: 3px black dotted;
    display:inline-block;
    }
    .box{
    display:inline-block;
    background:yellow;
    width:100px;
    height:100px;
    }
    #two{
    background:green;
    }
    </style></head>
    <body>
    <h2>Static Positioning</h2>
    <div class="parent">
    <div class="box" id="one">one</div>
    <div class="box" id="two">two</div>
    <div class="box" id="three">three</div>
    </div>
    </body>
    </html>
    Relative Positioning:
    An element with position: relative; is positioned relative to its normal position.
    By applying the properties 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.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .parent {
    border: 3px black dotted;
    display:inline-block;
    }
    .box{
    display:inline-block;
    background:yellow;
    width:100px;
    height:100px;
    }
    #two{
    top:20px;
    left:20px;
    background:green;
    position:relative;
    }
    <body>
    <h2>relative positioning</h2>
    <div class="parent">
    <div class="box" id="one">one</div>
    <div class="box" id="two">two</div>
    <div class="box" id="three">three</div>
    </div>
    </body>
    </html>
    CSS Fixed Positioning
     The fixed positioning property helps to put the text fixed on the browser.
    This fixed test is positioned relative to the browser window and doesn't move
    even you scroll the window.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .parent {
    border: 3px black dotted;
    display:inline-block;
    }
    .box{
    display:inline-block;
    background:yellow;
    width:100px;
    height:100px;
    }
    #two{
    top:20px;
    left:20px;
    background:green;
    position:fixed;
    }
    </style>
    </head>
    <body>
    <h2>fixed positioning</h2>
    <div class="parent">
    <div class="box" id="one">one</div>
    <div class="box" id="two">two</div>
    <div class="box" id="three">three</div>
    </div>

    </body>
    </html>
    absolute positioning
     The absolute positioning is used to position an element relative to the first
    parent element that has a position other than static.
     The box is taken out of the normal flow the box position is specified with the
    top,right,bottom,left.
     Relative-position: places an element relative to its current position with out
    changing the layout around it.
     absolute-position: places an element relative to its current position changing the
    layout around it.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .parent {
    border: 3px black dotted;
    display:inline-block;
    }
    .box{
    display:inline-block;
    background:yellow;
    width:100px;
    height:100px;
    }
    #two{
    top:20px;
    left:20px;
    background:green;
    position:absolute;
    }
    </style>
    </head>
    <body>
    <h2>absolute positioning</h2>
    <div class="parent">
    <div class="box" id="one">one</div>
    <div class="box" id="two">two</div>
    <div class="box" id="three">three</div>
    </div>
    </body>
    </html>
    Sticky positioning :
    An element with position: sticky; is positioned based on the user's scroll
    position.
    A sticky element toggles between relative and fixed, depending on the scroll
    position.
     It is positioned relative until a given offset position is met in the viewport -
    then it "sticks" in place (like position:fixed).
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.sticky {
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: red;
    border: 2px solid green;
    }
    </style>
    </head>
    <body>
    <p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
    <div class="sticky">I am sticky!</div>
    <div style="padding-bottom:2000px"> This is CSIT
    </div>
    </body></html>

    You might also like