Sunday, October 31, 2010

CSS Position

2:08 PM  Vasu  No comments

The position property specifies what kind of position is used. Possible values include:
  • static (default): indicates that the element will be placed at the default location. Please note that if static is specified, values for the top, bottom, right, and left properties will have no effect.
  • absolute: places an element in relation to the actual browser window. The position of the element moves along with the rest of the content when the page is scrolled.
  • relative: specifies how the element will be positions relative to how it would have been positioned by default.
  • fixed: places an element in relation to the actual browser window. The position of the element remains fixed even when the page is scrolled.
From the list of possible values, we can see that the position property by itself does not have a lot of value. After all, what does {position:relative;} mean if there is no information on what it is relative to? So, clearly additional properties are needed to complement the position property. They are as follows:
  • top

  • right

  • left

  • bottom

  • overflow

  • z-index



    • Absolute

    The absolute value of the position property means that the element will be displayed in the same location within the browser, with the location being determined by top, bottom, left, or right properties. The element will move with the rest of the content when scrolling. As an example, you will see a red ball 550 pixels from the top of the browser and 400 pixels from the left of the browser. The code for this is:

    p {
      position:absolute;
      top:50px;
      left:600px;
    }

    The HTML code,

    <div>
      <p><img src="red-ball.jpg">
    </div>

    renders the image you see that is 50px from the top of the browser and 600px from the left of the browser. Please notice that as you scroll up and down and page, the red ball moves along with the rest of the page. This is different from when we specify {position:fixed;}, when the red ball stays in the same place as the rest of the page moves.


    Relative

    The relative value of the position property specifies how the element will be positions relative to how it would have been positioned by default. It is used in combination with a direction (top, bottom, left, and right). Let's view an example of relative position in action:
    CSS Code

    div {
      background-color:#FF00FF;
      width:250px;
      height:60px;
    }
    p {
    }
     
     

    The HTML code,

    <div>
      <p>Example to show relative position.
    </div>

    renders

    Example to show relative position.

    div {
      background-color:#FF00FF;
      width:250px;
      height:60px;
    }
    p {
      position:relative;
      top:15px;
    }



    <div>
      <p>Example to show relative position.
    </div>



    Example to show relative position.

    In the above example, applying the {position:relative; top:15px;} style added 15px of space on top of the text. In other words, this style shifted the text down by 15px relative to the default position.



    Fixed

    The fixed value of the position property means that the element will always be displayed in the same location within the browser, with the location being determined by top, bottom, left, or right properties. As an example, you will see a red ball 50 pixels from the top of the browser. As you scroll down the page, that red ball stays in the same place. The code for this is:

    p {
      position:fixed;
      top:50px;
      left:650px;
    }

    The HTML code,

    <div>
      <p><img src="red-ball.jpg">
    </div>

    renders the image you see that is 50px from the top of the browser and 650px from the left of the browser. Please notice that as you scroll up and down and page, the red ball stays in the same place.


    Static

    Static is the default value of the position property, which means if no value is given to the position property, its value is static. If an element's position is specified as static, that means it will be rendered in the normal flow of the text.
    Since static is the default value of position, we seldom see it declared explicitly. The only instances are when we are trying to undo a declaration that was done to the same element.
    If static is the value of position, the directional properties (top, bottom, left, and right) are not used even if specified.


    Top

    The top property specifies the distance from the top of the element to the default location of the element (when position=relative) or the distance between the top of the element and the top of the container (when position=absolute). This can be specified as a percentage, as a length, or 'auto'.
    Let's take a look at two examples:
    Example 1: CSS Code

    div {
      background-color:#FF00FF;
      width:500px;
      height:60px;
    }
    p {
      position:relative;
      top:10px;
    }

    The HTML code,

    <div>
      <p>Sample text.
    </div>

    renders

    Sample text.
    Without using the top property, the text would have appeared right against the top edge of the pink container. In the above example, the text is 10px from the default location.
    Example 2: CSS Code

    div {
      background-color:#FF00FF;
      width:500px;
      height:60px;
    }
    p {
      position:relative;
      top:-10px;
    }

    The HTML code,

    <div>
      <p>Sample text.
    </div>

    renders

    Sample text.
    In the above example, the text is 10px above the default location. So, when a relative position is specified, a positive value for "top" means the element is located below the default location, while a negative value for "top" means the element is located above the default location.





    Bottom

    The bottom property specifies the distance from the bottom of the element to the default location of the element (when position=relative) or the distance between the bottom of the element to the bottom of the container (position=absolute). This can be specified as a percentage, as a length, or 'auto'.
    Let's take a look the following example:
    CSS Code

    div {
      background-color:#FF00FF;
      width:250px;
      height:60px;
    }
    p {
    }
     
     

    The HTML code,

    <div>
      <p>No bottom property.
    </div>

    renders

    No bottom property.

    div {
      background-color:#FF00FF;
      width:250px;
      height:60px;
    }
    p {
      position:relative;
      bottom:5px;
    }



    <div>
      <p>Apply bottom:5px.
    </div>



    Apply bottom:5px.

    In the above example, applying the {position:relative; bottom:5px;} style moved the text up by 5px.


    Left

    The left property specifies the distance from the left of the element to the default location of the element (when position=relative) or the distance between the left of the element and the left of the container (when position=absolute). This can be specified as a percentage, as a length, or 'auto'.
    Let's take a look at two examples:
    Example 1: CSS Code

    div {
      background-color:#FF00FF;
      width:500px;
      height:60px;
    }
    p {
      position:relative;
      left:30px;
    }

    The HTML code,

    <div>
      <p>This text is 30 pixels from the left of the box.
    </div>

    renders

    This text is 30 pixels from the left of the box.
    Without using the left property, the text would have started right at the left edge of the pink container. Applying{position:relative; left:30px;} shifts the text away from the default location by 30px.
    Example 2: CSS Code

    div {
      background-color:#FF00FF;
      width:500px;
      height:60px;
    }
    p {
      position:relative;
      left:-10px;
    }

    The HTML code,

    <div>
      <p>This text is 10% from the left of the box.
    </div>

    renders

    This text is 10% from the left of the box.
    In the above example, the text is 10% (or 50px) away from the default location.


     Right

    The right property specifies the distance from the right of the element to the default location of the element (when position=relative) or the distance between the right of the element and the right edge of the container (when position=absolute). This can be specified as a percentage, as a length, or 'auto'.
    Let's illustrate with two examples:
    Example 1
    CSS Code

    div {
      background-color:#FF00FF;
      width:250px;
      height:60px;
    }
    p {
      text-aligh:right;
    }
     
     

    The HTML code,

    <div>
      <p>No right property.
    </div>

    renders

    No right property.

    div {
      background-color:#FF00FF;
      width:250px;
      height:60px;
    }
    p {
      text-align:right;
      position:relative;
      right:30px;
    }



    <div>
      <p>Apply right:30px.
    </div>



    Apply right:30px.

    In the above example, we see applying the {position:relative; right:30px;} style shifts the text 30 pixels away from the original location.
    Example 2
    CSS Code

    div {
      background-color:#FF00FF;
      width:250px;
      height:60px;
    }
    p {
      text-aligh:right;
    }
     
     

    The HTML code,

    <div>
      <p>No right property.
    </div>

    renders

    No right property.

    div {
      background-color:#FF00FF;
      width:250px;
      height:60px;
    }
    p {
      text-align:right;
      position:relative;
      right:30%;
    }



    <div>
      <p>Apply right:30%.
    </div>



    Apply right:30%.

    In the above example, we see applying {position:relative; right:30%;} shifts the text 30% (75 pixels) away from the original location.


    Overflow

    The overflow property indicates how the content will be displayed when it exceeds the containing element. Possible values are:
    • visible: The entirety of the content is shown, regardless of the height specified for the element.
    • hidden: Only the content within the containing element is shown.
    • scroll: Displays the vertical and horizontal scroll bar to allow scroll of the content, regardless of whether the content exceeds the containing element.
    • auto: If the content is beyond the containing element, a scroll bar is displayed.
    Examples for each type of overflow property are shown below:
    auto
    We are using this area to show how different values of the overflow property will behave.This particular one is on the auto value.
    hidden
    We are using this area to show how different values of the overflow property will behave.This particular one is on the hidden value.
    visible
    We are using this area to show how different values of the overflow property will behave.This particular one is on the visible value.
    scroll
    We are using this area to show how different values of the overflow property will behave.This particular one is on the scroll value.



     Z-Index

    The z-index property specifies the stack order of an element. In other words, when there is an overlap between two elements, the z-index value determines which one shows up on top. The element with a larger z-index value will appear on top.
    For example, say we define two blocks with the following CSS code:

    #redblock {
      z-index: 1;
      position:
      absolute;
      width:80px;
      height:100px;
      top:20px;
      left:20px;
      border: 1px solid #FFF;
      background-color: #FF0000;
    }

    #pinkblock {
      z-index: 2;
      position: absolute;
      width:100px;
      height:80px;
      top:50px;
      left:50px;
      border: 1px solid #FFF;
      background-color: #FF00FF;
    }

    The following HTML code,

    <div id="redblock"></div>
    <div id="pinkblock"></div>

    renders the following:

    As we can see, the pink block, with a z-index value of 2, lies on top of the red block, which has a z-index value of 1.









    Dont Miss Another Post Connect With Us !

    Enter your email address:
    Posted in:

    0 comments:

    Post a Comment