-->

CSS Position Tutorial

CSS Position Tutorial

CSS Position Tutorial

CSS Position Tutorial:

Positioning at CSS is a very important issue. If you don't have a clear idea, you will go to work and get stuck later. Especially if you want to put a picture etc. in an unexpected place on the page, if you want to take another div or element on one div or element, etc.



There are 4 types of positions

static:

By default position: static; Yes, that means there is no positioning. Due to the code in the document, the element will also appear on the next page.

relative:

It is the same as static but here the element can be moved from its position using top, left, bottom, right and z-index. If the relative position, the element is subject to its own position. E.g.

div.one{position:relative;top:50px
;left:30px;width:200px;height:200px;
background: red;}
div.two{width:200px;height:200px;
background: maroon;}
div.three{width:200px; height:200px; background: black;}

See application:

<!DOCTYPE html>
<html>
<head>
<style>
div.one{position:relative;
top:50px;
left:30px;
width:200px;
height:200px;
background: red;}
div.two{width:200px;
height:200px;
background: maroon;}
div.three{width:200px;
height:200px;
background: black;}
</style>
</head>
<body>
<div class="one">div 1</div>
<div class="two">div 2</div>
<div class="three">div 3</div>
</body>
</html>

See Div 1 is 50 pixels down and 30 pixels to the left. Even No. 2 has moved on to Div. If you want to see the number 1 div below, then z-index: -1; Or the day will go down with any minus value.

The remarkable thing is that the vacuum created by going down to the left did not allow anyone else to enter. This means that the div will not lose its original space but will hold on.

z-index works only when an element is positioned in CSS.


absolute:

position: absolute; If given, the element will be subject to its immediate previous parent div (with top, left, etc.). If there is no parent div, then <html> is the left and right side of the browser. As in the previous example, make position: absolute and see the application.

Here the element no longer holds space for itself

If the absolute position is lost, the element loses its normal position in the document.


fixed:

If the position of an element is fixed then it will be fixed subject to the browser and even if you scroll, that element will not change its position. The only difference is that it works exactly like absolute, it will always take its position according to the browser (if given top, left, etc.), not subject to parent element like absolute.

p.f_text {position: fixed;top: 20px;right: 15px;color: maroon;}

<!DOCTYPE html>
<html>
<head>
<style>
p.f_text {position: fixed;
top: 20px;
right: 15px;
color: maroon;}
</style>
</head>
<body>
<p>Jitubd fixed position tutorial</p>
<p>Myhtmlcore</p>
<p>Myhtmlcore</p>
</body>
</html>

If you do not DOCTYPE in IE7, IE8, fixed positioning will not work.
Facebook Comments

Follow by Email