May 03, 2021 CSS
1. CSS Positioning (positioning).
2. Decide to display the element in front!
The CSS position property, which allows you to overlap one part of the layout with another, and to accomplish tasks that typically require multiple tables over the years.
Positioning can be tricky at times!
The CSS positioning property allows you to position an element. It can also place one element behind another and specify what should happen if the contents of one element are too large.
Elements can be positioned using the top, bottom, left, and right properties. H owever, these properties do not work unless the position property is set in advance. They also work differently, depending on the positioning method.
There are four different positioning methods.
The default value for HTML elements, that is, no positioning, appears in a normal stream.
Statically positioned elements are not affected by top, bottom, left, right.
The position of the element is fixed relative to the browser window.
It does not move even if the window is scrolling:
Note: F ixed positioning needs to be described under IE7 and IE8! DOCTYPE can be supported.
Fixed positioning makes the location of the element independent of the document flow and therefore does not take up space.
Fixed anchors overlap with other elements.
The positioning of the relative positioning element is relative to its normal position.
The contents of the relatively positioned element and the overlapping elements that can be moved do not change the space it originally occupies.
Relative positioning elements are often used as container blocks for absolute positioning elements.
The position of the absolutely positioned element is relative to the most recently positioned parent element, and if the element does not have a positioned parent element, its position is relative to the .
Absolutely positioning makes the location of the element independent of the document flow and therefore does not take up space.
The elements positioned by Absolutely overlap with other elements.
Elements are positioned independently of the document flow, so they can override other elements on the page
The z-index property specifies the stacking order of an element (which element should be placed first, or after)
An element can have a stacking order of positive or negative numbers:
Elements with a higher stacking order are always in front of lower stacking order elements.
Note: If two anchor elements overlap and no z-index is specified, the last anchor element in the HTML code will be displayed at the top.
This example shows how to shape an element. The element is clipped into this shape and displayed.
How to use a scroll bar to display content that overflows within an element
This example shows how the overflow property creates a scroll bar that is set to fit when the contents of an element are too large in the specified area.
How to set up browser auto-overflow processing
This example shows how to set up a browser to automatically handle overflows.
This example shows how to change the cursor.
The numbers in the "CSS" column indicate which CSS (CSS1 or CSS2) version defines the property.
Property | Description | Value | Css |
---|---|---|---|
bottom | Defines the offset between the outer margin boundary under the anchor element and the lower boundary of the containing block. |
auto
length % inherit |
2 |
clip | Clips an absolutely positioned element |
shape
auto inherit |
2 |
cursor | The display cursor moves to the specified type |
Url
auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
2 |
left | Defines the offset between the left margin boundary of the anchor element and the left boundary of the block it contains. |
auto
length % inherit |
2 |
overflow
|
Sets what happens when the contents of an element overflow its region. |
auto
hidden scroll visible inherit |
2 |
position | Specifies the type of positioning of the element |
absolute
fixed relative static inherit |
2 |
right | Defines the offset between the right margin boundary of the anchor element and the right boundary of the block it contains. |
auto
length % inherit |
2 |
top | Defines the offset between the top margin boundary of a positioning element and the upper boundary of its containing block. |
auto
length % inherit |
2 |
z-index | Set the stacking order of the elements |
number
auto inherit |
2 |
CSS Reference Manual: CSS position property