CSS Positioning
The CSS positioning
properties allow you to position an element. It can also place an element
behind another and specify what should happen when an element's is too big.
Elements can be positioned using the top, bottom, left and right properties.
However, these properties will not work unless the position property is set
first. they also work differently depending on the positioning method.
Using CSS, you
can place elements precisely on a page employing
a technique called
“positioning.” Positioning is decided by an X axis and
Y axis. To indicate a point on the screen, you'll be
able utilize the X and Y coordinates for that point. There
are a few ways to specify position in CSS: absolute,
relative, fixed, inherit, and static.
There are four most
often used of CSS positioning properties
- Static positioning: HTML
elements are by default Static positioning. It
essentially defines the position of a given box as a positioned
element. It flows in the normal rendering sequence of the web
page. Static positioned elements are not affected by the top,
bottom, left, and right properties.
- Fixed positioning: An element with fixed position is positioned relative
to the browser window and remains in its specified location even as
the content scrolls underneath it. Fixed positioned elements can overlap
other elements.
Example
header {
position: fixed;
top: 15px;
left: 6px;
}
- Relative positioning: defines positioning in such a way that elements are
offset from the previous element in the HTML code. The
relative positioned element is relative to its normal position. This
allows objects to be placed in relation to one another.
Example
header {
position: relative;
top: 15px;
left: 6px;
}
The
content of relatively positioned elements can be moved and overlap other
elements, but the reserved space for the element is still preserved in normal
flow.
- Absolute positioning: defines the position of a given bounding box from the
top
and left side margins of the web page. An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found the containing block is <html>.
Example
header {
position: relative;
top: 15px;
left: 6px;
}
Overlapping Elements
When elements
are positioned outside the normal flow, they can overlap other elements. The z-index
property specifies the task order of an element. An element can have a positive
or negative stack order. An element greater stack order is always in front of
an element with a lower stack order
Example
header {
position: absolute;
top: 25px;
left: 6px;
z-index: -1;
}
Note: If two positioned elements overlap without a z-index specified,
the element positioned last in the HTML code will be shown at the top.
All CSS Positioning Properties
|
Property |
Description |
Values |
|
bottom |
Set the bottom margin edge for a positioned box |
Auto, length, %, inherit |
|
clip |
Clip absolute positioned elements |
Shape, auto, inherit |
|
Cursor |
Specifies the type of cursor to be displayed |
Url, auto, inherit, default, pointer, move, e-resize, ne-resize,
nw-resize, se-resize etc. |
|
Left |
Set the left margin edge for a positioned box |
Auto, length, %, inherit |
|
Overflow |
Specifies what happens if content overflows an element’s box. |
Auto, hidden, %, scroll, visible, inherit |
|
z-index |
Set the stack order of an element. |
Number, length, %, inherit |
|
Position |
Specifies the type of positioning for an element. |
Absolute, relative, static, fixed, inherit |
Leave a comment
No Cmomments yet