Scribd Logo
Upload

Welcome to Scribd!

  • Css Position Slides

    Uploaded by

    vefeje3792
    2 views4 pages

    Original Title

    css-position-slides

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    2 views4 pages

    Css Position Slides

    Uploaded by

    vefeje3792

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 4

    Positioning

    How to change the position of elements


    1. for absolute value for position property the positioning context depends on 2 cases:
    a. If there is no position property assigned to any parent element, then the positioning context will be the <html> element.
    b. If the position property is applied to some of the parent elements, then the positioning context will be to the nearest parent with the position
    property assigned.

    2. When you apply overflow: hidden property to <body> element the property (overflow: hidden) gets applied to <html> element. This is the
    default behavior in CSS. If you want to apply overflow: hidden to body somehow, you can define overflow: hidden (auto would also work) to
    <html> and manually define overflow: hidden to <body> both.
    Positioning Elements

    <html>
    <body> position:

    <div> static Default


    Document flow

    absolute
    <div>
    relative

    <div> fixed

    sticky
    Changing the Position

    <html>
    <body>
    top
    <div> <div>

    viewport
    left <div> right
    <div>
    < <html>

    bottom <body>
    <div>
    <…>

    Document Flow Positioning Context


    Summary
    The “position” Property The “Document Flow” Moving Elements
    static (default) • The default positioning • top
    fixed behaviour of html elements • bottom
    absolute • Can be changed with • left
    relative position • right
    sticky • Elements can remain in the Z-Index
    document flow or be
    Positioning Context excluded from it
    • Changes the default
    • Defines the anchor point for element positioning along
    Stacking Context
    your position change the z-axis
    • The viewport for fixed • Created when applying • auto (0) as default value
    • Another element for fixed/ sticky or • Changes only possible
    absolute absolute/ relative in when position is applied
    • The element itself for combination with z-index • Larger value = element is
    relative • Defines stacking behaviour positioned on top of other
    • The viewport and another of child elements elements
    element for sticky

    NOTE 1: The top, bottom, left, right and z-index properties can only be applied if the element has position property other than static.
    NOTE 2: For inline elements changing the width property has no impact.
    NOTE 3: position property can be applied to block-level as well as inline elements.
    NOTE 4: If there is a margin that is applied to the parent element then, along with position: fixed, we have to add top: 0 and left: 0 to
    move it to the top (as in navigation bar).

    You might also like