property specifies the position of the positioning element type.
Five values of the position property:
static
relative
fixed
absolute
sticky
Element can be used at the top, bottom, left and right positioning properties. However, these attributes can not work unless the position property is set first. They also have different ways of working, depending on the positioning method.
static positioning
The default value for HTML elements, that is not located, follow the normal flow of the document object.
Static positioned elements will not be top, bottom, left, right influence.
Examples
div.static { position: static; border: 3px solid #73AD21; }
fixed positioning
The position of the element with respect to the browser window is a fixed position.
Even if the window is rolling it does not move:
Examples
p.pos_fixed { position:fixed; top:30px; right:5px; }
Note: Fixed positioning in IE7 and IE8 description DOCTYPE need to support!.
Fixed locate the position of the document element is independent of flow, and therefore does not occupy space.
Fixed positioning and other elements overlap.
relative positioning
It is positioned opposite the positioning element relative to its normal position.
Examples
h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }
Moving relatively positioned elements, but the space it had occupied does not change.
Examples
h2.pos_top { position:relative; top:-50px; }
The relative positioning of the elements is often used as absolute positioning block element container.
absolute positioning
Position absolute positioning of elements relative to the nearest positioned parent element, if the element is not already positioned parent element, then its position with respect to:
Examples
h2 { position:absolute; left:100px; top:150px; }
absolute positioning with the location-independent flow document elements, and therefore do not take up space.
absolute positioning and other elements overlap.
sticky positioning
English literally sticky sticky, adhesive, tacky so that it can be called positioning.
position: sticky; based on a rolling position of the user to locate.
Positioning the viscosity is dependent on the rolling elements of the user in the position: relative and position: fixed switching between the positioning.
It behaves like position: relative; and when the page scrolls beyond the target area, it behaves like position: fixed ;, it will be fixed at the target location.
Elements are positioned in front of performance across a certain threshold relative positioning, after a fixed positioning.
This means a certain threshold top, right, bottom left, or one, in other words, designated top, one of the right, bottom left or four threshold values, the viscosity before positioning effect. Otherwise, their behavior and the relative positioning of the same.
Note: Internet Explorer, Edge 15 and earlier versions of IE do not support sticky positioning. Safari requires -webkit- prefix (see examples below).
Examples
div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }
Overlapping elements
Positioning document elements flow has nothing to do, 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, or behind)
Stacking order of an element can have positive or negative:
Examples
img { position:absolute; left:0px; top:0px; z-index:-1; }
An element having a higher stacking order is always in front of the lower element of the stacking order.
Note: If the two positioning elements overlap, do not specify the z - index, final positioning element in the HTML code will be displayed on top.
All CSS positioning properties
"CSS" column number to indicate which CSS (CSS1 or CSS2) version of the definition of the property.
Property Description Value CSS
defines the bottom outside the positioning element comprises an offset from the boundary between the boundary and its lower block. auto
length
%
inherit2
clip clip an absolutely positioned elements shape
auto
inherit2
cursor display cursor to the specified type url
auto
crosshair
default
pointer
move
e-resize
What-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help2
left positioning element defines the outer left from the boundary between the blocks including the offset and its left boundary. auto
length
%
inherit2
overflow
When the content of the element set what happens when an overflow its area. auto
hidden
scroll
visible
inherit2
overflow-y
SUMMARY specify how the top / bottom edge of the content region of the overflow element auto
hidden
scroll
visible
no-display
non-content2
overflow-x
Specify how to handle the content of the right / left edge of the element contents spill area auto
hidden
scroll
visible
no-display
non-content2
Positioning type absolute position specified element
fixed
relative
static
inherit2
right positioning element defines a right outer offset from the boundary between blocks comprising its right border. auto
length
%
inherit2
It defines a top locating element comprises on its outer offset from the boundary between the block boundary. auto
length
%
inherit2
z-index set stacking order of elements number
auto
inherit2
(Editor: Leilin Peng Source: network intrusion deleted)