CSS position


What is the CSS position?
CSS position property is the positioning method. It creates a layer for any element where we use position property.
Position have five type method:
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

You can use left, top, right and bottom position but without position property you can set position in an element from the left, top, right and bottom but these property not be effected without using position method.. these (left, top, right and bottom) property don't work where we use position: static;
 
Because position:static is the default value.

What is the default value of the position?
position: static;

Position static is the default value. it's behave a normal element as other element.

Position absolute work create a layer if we use any element then it be relative from the parent element otherwise it will be positioned from the view screen.

Fixed position always positioned from the view screen, we use positioning property set left, top, right and bottom.

Example of the position CSS:


<!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS Position</title>
  <style>
    * {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 0;
    }
    .anyPositinoElementMain {
      width: 600px;
      padding: 50px 25px 25px;
      background: #0bf;
      border: 5px solid #ccc;
      margin: 50px auto;
      color: #fff;
      position: relative;
    }
    .positioinInnerElement {
      width: 200px;
      padding: 25px;
      background: #eee;
      border: 5px solid #ccc;
      color: #333;
      text-align: center;
      position: absolute;
      right: -50px;
      top: -50px;
    }
    .positionFixed {
      background: #0b6;
      border: 2px solid #ccc;
      padding: 5px;
      border-radius: 5px;
      text-align: center;
      position: fixed;
      bottom: 10px;
      right: 20px;
    }
    .positionSticky {
      background: #0b6;
      border: 1px solid #ccc;
      padding: 5px;
      width: 100%;
      display: block;
      color: #fff;
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
    }
  </style>

</head>

<body>
  <div class="anyPositinoElementMain">
    <div class="positioinInnerElement">Position absolute property</div>
    On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You
    can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. <br><br>When
    you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change
    the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery
    on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a
    choice of using the look from the current theme or using a format that you specify directly. <br><br>To change the overall
    look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style
    gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide
    reset commands so that you can always restore the look of your document to the original contained in your current template.
    On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.
    You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks.
    <br><br>
    <div class="positionSticky">I am the CSS Position sticky.</div>
    <div class="positionFixed">CSS Position fixed</div>
    When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change
    the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery
    on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a
    choice of using the look from the current theme or using a format that you specify directly. <br><br>To change the
    overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the
    Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery
    provide reset commands so that you can always restore the look of your document to the original contained in your current
    template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your
    document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building
    blocks. <br><br>When you create pictures, charts, or diagrams, they also coordinate with your current document look.
    You can easily change the formatting of selected text in the document text by choosing a look for the selected text from
    the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab.
    Most controls offer a choice of using the look from the current theme or using a format that you specify directly. <br><br>To
    change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available
    in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles
    gallery provide reset commands so that you can always restore the look of your document to the original contained in
    your current template. When you create pictures, charts, or diagrams, they also coordinate with your current document
    look. You can easily change the formatting of selected text in the document text by choosing a look for the selected
    text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on
    the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify
    directly. <br><br>To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change
    the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery
    and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original
    contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with
    the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages,
    and other document building blocks. <br><br>When you create pictures, charts, or diagrams, they also coordinate with
    your current document look. You can easily change the formatting of selected text in the document text by choosing a
    look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using
    the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a
    format that you specify directly. <br><br>To change the overall look of your document, choose new Theme elements on the
    Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command.
    Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of
    your document to the original contained in your current template.
  </div>

</body>

</html>


  
CSS Position sticky: this is the new method now at this time is working but it’s required with position prefix as position: -webkit-sticky; position: sticky; But most important thing, don’t forget that setting position (left, top, right & bottom). You can set any position, when you will scroll page then your element will be sticky as given example on the above.
Also, you can check and modify for your satisfaction in this URL: https://embed.plnkr.co/eN4gXmSnrJUR82QeCzfH/

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.