Skip to content
Advertisements

CSS Position

Why css position?

Here we will try to give information about positioning with CSS.

We will repeat the definition of block-level and inline-level elements as it is related to positioning.

Block-level elements: The view format of the block-level element is like a box. Block-level elements may include inline elements and other block-level elements. Typical features are the start of a new line. Example: h6, p, li

Inline-level Elements: Inline-level elements appear as content, and may contain another inline elelement. They do not create new rows or spaces. Example: a, strong, span

However, we can change the initial values ​​of these elements with the display property. In other words, we can convert an inline-level element into a span ( /. ) block-level element. In the same way we can convert a block-level element into an inline element.

There are three basic positioning modes in CSS: normal flow (position: static and position: relative), float, and absolute positions (position: absolute). All elements were initially positioned as normal flow.

CSS also allows you to determine the position of HTML elements relative to other elements. You can take an HTML element above or below the other and decide what to do if an HTML element is too large.

All elements have top (top), bottom (right), right (left) and left (left) properties. However, these properties will not work if the position property in CSS is not specified. In addition, there are four different methods of determining each position. These:

  • static – If no feature is specified
  • fixed – Fixed, non-moving element
  • relative – Specify the position according to the position that should be normal
  • absolute – Placing a coordinate on a page

Position: absolute

If the element is not specified by any element or element is specified in all HTML pages are expressed as pixels. For example, if we want the H2 element to be the starting point of the page (0, 0) to the right of 100 pixels and below 150 pixels (100, 150):

   h2
   {
      position: absolute;

      left: 100px;
      top: 150px;
   }

Such positions do not take up space other than RELATIVE. So they’re isolated from our page. It can be considered as elements that act independently and take into account only one starting point.

The “Absolute” featured elements can pass over and close other elements.

    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
        .box1 {
            position: absolute;
            top:50px;
            left:20px;
            width: 100px;
            height: 100px;
            background: red;
        }
        .box2 {
            position: absolute;
            left:120px;
            top:20px;
            width: 100px;
            height: 100px;
            background: yellow;
        }
        .box3 {
            position: absolute;
            top:100px;
            left:80px;
            width: 100px;
            height: 100px;
            background: green;

output:


Position: relative

It allows us to adjust an HTML element from its own position up, down, right, and left. The space occupied by the element is retained by the scanner, so there is no change. However, we can move right, left, bottom and top.

   h2
   {
      position: relative;

      left: -20px;
   }

In the above example, the H2 element will shift 20 pixels from where it was used and start from there. In this case, the other elements will be able to enter the field.


Position: fixed

Fix an HTML element to the browser screen. Even if you use scroll, that element will be placed there (not moving).

   p.fixed
   {
      position: fixed;

      top: 30px;
      right: 5px;
   }

If the above code is executed, we will see that P has a fixed property and remains constant at 5 pixels from the top to 30 pixels.

Such elements can overlap one another and close the other.


z-index

How to work with layers in Photoshop-style programs and the order of the layers can be determined, in CSS with the z-index feature to determine this and we can make an HTML element appear above or below the other.

   img
   {
      position: absolute;

      left: 0px;
      top: 0px;

      z-index: -1;
   }

The picture with the value -1 above will appear under all other elements. Because this value is not specified in other elements 0 (zero) will be detected as. However, since this element is -1, the substrate will be accepted.

The lowest values of the negative values indicate the upper values of the positive values. For example, the element with a property of -2, which is larger than the element with two z-indexes, of which one is -2 is one, will appear at the top.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: