The best CSS Positioning (Positioning) Tutorial In 2024, In this tutorial you can learn Decide to show in front of the elements!,Elements can overlap!,Positioning (Positioning),Static positioning,Fixed positioning,Examples,Relative positioning,Examples,Examples,Absolute positioning,Examples,Overlapping elements,Examples,More examples,All CSS positioning properties,
Positioning sometimes very tricky!
CSS positioning properties allow you to locate an element. It can also be an element in another element behind, and specify an element content is too large, what should happen.
Elements can be used at the top, bottom, left and right positioning attributes. However, these properties will not work unless the position property is set first. They also have different ways of working, depending on the positioning method.
There are four different positioning methods.
Default HTML elements, that is not located, the elements appear in the normal stream.
Static positioning elements will not be top, bottom, left, right influence.
Position of the element relative to the browser window is a fixed position.
Even when the window is rolling it does not move:
Note: Fixed positioning in IE7 and IE8 description DOCTYPE need to support!
Fixed positioning of the position of the document elements independent of flow, and therefore does not occupy space.
Fixed positioned elements and other elements overlap.
Relative positioning element is positioned relative to its normal position.
Can be moved relative positioning of content elements and overlapping elements, it does not change the original space occupied.
Relative positioning element is often used as a container block absolutely positioned elements.
Position absolute positioning of elements relative to the nearest positioned parent element, if the element is not already positioned parent element, its position relative to the <html>:
Absolutely positioned so that the position of the document elements independent of flow, and therefore does not occupy space.
Absolutely positioned elements and other elements overlap.
Orientation and flow independent of document elements, so they can cover other elements on the page
z-index attribute specifies the stacking order of an element (which element should be placed in front of or behind)
Element can have a positive or negative stack order of:
Element has a higher stacking order is always in front of the lower stacking order of elements.
Note: If two positioned elements overlap, do not specify the z - index, final positioning of the elements in the HTML code will be displayed on top.
This example shows how to set the shape of the element. The element is clipped into this shape, and displayed.
How to use the scroll bar to display the contents of the inner element overflow
This example demonstrates the overflow property to create a scroll bar, when the contents of an element in the designated area is too large, how to set up to accommodate.
How to set the browser to automatically handle overflow
This example demonstrates how to set the browser to automatically handle overflow.
This example demonstrates how to change the cursor.
"CSS" column indicates the number which CSS (CSS1 or CSS2) version of the definition of the property.
Attributes | Explanation | value | CSS |
---|---|---|---|
bottom | Offset defines the boundary between the lower positioning element outside its containing block from the border under. | auto length % inherit | 2 |
clip | Clips an absolutely positioned elements | shape auto inherit | 2 |
cursor | Move the cursor to display 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 targeting elements left margin offset block boundary between the left edge of its containing. | auto length % inherit | 2 |
overflow | When the content of the element set what happens when overflowed its region. | auto hidden scroll visible inherit | 2 |
overflow-y | Specifies how to handle the contents of the top / bottom edge of the overflow element content area | auto hidden scroll visible no-display no-content | 2 |
overflow-x | Specifies how to handle to the right / left edge of the content area of the element content overflow | auto hidden scroll visible no-display no-content | 2 |
position | Specify the type of positioning elements | absolute fixed relative static inherit | 2 |
right | It defines the targeting elements comprising its border and right margin offset between the block right border. | auto length % inherit | 2 |
top | It defines a positioning element on the border and its margin on the block contains the offset between the boundaries. | auto length % inherit | 2 |
z-index | Setting the stacking order of elements | number auto inherit | 2 |