CodesJava

Easy learning with example program codes

CSS Position

To specify the position for an element, the CSS position property is used. It is useful for placing an element behind another. It also finds its use in the scripted animation effect. The top, bottom, left and right properties can be used after the position property to set the position of an element.

CSS Static Positioning:

Being a by default position, it positions an HTML element according to the normal flow of the page and the top, bottom, left and right properties do not affect it.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 5px solid red;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div class="static">
Hello World!!
</div>
</body>
</html>

Output:

Explanation:

In the above example, we displayed the effect of the CSS static positioning.

CSS Fixed Positioning:

To keep the text fixed relative to the browser window, the fixed positioning property is used. This fixed text doesn’t move even on scrolling the window.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  border: 5px solid red;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div class="fixed">
Hello World!!
</div>
</body>
</html>

Output:

Explanation:

In the above example, we displayed the effect of the CSS fixed positioning.

CSS Relative Positioning:

To place an HTML element relative to its normal position, the relative positioning property is used.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  border: 5px solid red;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div class="relative">
Hello World!!
</div>
</body>
</html>

Output:

Explanation:

In the above example, we displayed the effect of the CSS relative positioning.

CSS Absolute Positioning:

Relative to the first parent element with a position other than static, we can position an HTML element using the CSS Absolute Positioning. Thus we can place an element anywhere on a page. The containing block is HTML, in case there is no such element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div.absolute {
  position: absolute;
  border: 5px solid red;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div class="absolute">
Hello World!!
</div>
</body>
</html>

Output:

Explanation:

In the above example, we displayed the effect of the CSS absolute positioning.

CSS Position Properties:

PropertyValuesUses
bottomauto, length, %, inheritTo define the bottom margin edge for a positioned box.
clipshape, auto, inheritTo clip an absolutely positioned element.
cursorURL, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, helpTo define the type of cursor to be displayed.
leftauto, length, %, inheritTo define the left margin edge for a positioned box.
overflowauto, hidden, scroll, visible, inheritTo specify what happens if content overflow an element’s box.
positionabsolute, fixed, relative, static, inheritTo define the type of positioning for an element.
rightauto, length, %, inheritTo define a right margin edge for a positioned box.
topauto, length, %, inheritTo define a top margin edge for a positioned box.
z-indexnumber, auto, inheritTo set stack order of an element.
Please follow and like us:
error
Posted in CSS   









Copyright © 2019 CodesJava DMCA.com Protection Status