How to Install Operating System ??Complete Guide Installing The Operating System

How To Set Position in CSS

In CSS an element can be arranged in what location layout or position will be placed and how that is by using the position of the property, now in this tutorial, we will discuss how to adjust the position in CSS with an easy-to-understand explanation.

This property position in CSS has 4 values that can be used to adjust the position of these elements, namely: static, relative, absolute, fixed, where some of these values can be set using up, left, right, bottom property using positive values or negative.

Before going forward, there are a number of articles that you might be looking for.

Read Too :

How to Set Position in CSS

Like the beginning, it is said that to set the position of an element then using a position property where position property has 4 values, these values ​​have different working characteristics when placing an element in HTML. The following is how to use the position property.

element {
    position: static;
}

Position Static

The static position is a position that has been used by default when we never specify the position method used, this static position will not work when using top, bottom, left, right properties.

<style type = "text/css">
    .element {
        position: static;
        top: 100px;
        border: 1px solid #000;
     }
</style>

<div class = "element">
     This element uses static position without changing top, bottom, left, right positions.
     because the property will not work in this position.
</div>

The following results …

How To Set Position in CSS
How To Set Position in CSS

The above code uses the top property with a value of 100px, so it should be if the top property works in the static position the element will drop to 100px.

Relative Position

This relative position is almost the same as the static position, which is the normal position. But the difference is this relative position can use 4 properties top, bottom, left, right to be able to set the layout of the location of the element.

<style type = "text/css">
    .element {
        position: relative;
        top: 100px;
        border: 1px solid #000;
    }
</style>

<div class = "element">
     This element uses a relative position with top properties as far as 100 pixels,
     so the element will drop 100 pixels.
</div>

The following results …

How To Set Position in CSS
How To Set Position in CSS

It can be seen that an element will go down as far as 100 pixels because using the top property with a value of 100px, the element will remain at a distance of 100 pixels from the top of the browser.

Absolute Position

This absolute position will depend on the parent-element or parent element of the absolute position element, the easier this absolute element depends on the nest of the element. But if the absolute element is not in an element, the position absolute will adjust to the main element, the body, for example.

<style type = "text/css">
    .element {
        position: absolute;
        right: 0;
        top: 100px;
        width: 200px;
        border: 1px solid #000;
    }
</style>

<div class = "element">
    This element uses absolute position with top properties as far as 100 pixels and property right 0,
    so the element will drop 100 pixels and be in the right position with a width of 200 pixels.
</div>

The following results …

How To Set Position in CSS
How To Set Position in CSS

Visible absolute position can be easily moved anywhere using top, bottom, left right properties.

Position Fixed

This fixed position is a unique position, fixed or fixed, as the name implies, an element that uses this fixed position remains in a predetermined position even though an element is higher than a browser so it can scroll up and down, but this fixed element will remain in his position, will not change. Here’s an example.

<style type = "text/css">
    body {
        height: 1000px;
    }
    .element {
        position: fixed;
        top: 100px;
        width: 200px;
        border: 1px solid #000;
    }
</style>

<div class = "element">
    This element uses fixed positions with top properties as far as 100
</div>

The following results …

How To Set Position in CSS
How To Set Position in CSS

The author deliberately uses a page height of 1000 pixels to create a scroll in the browser so that the fixed element will work when the scroll is sliding above and below.

So the tutorial on how to set the position in this CSS, hopefully, it is useful.

Before going forward, there are a number of articles that you might be looking for.

Read too :

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *