What are the different ways css positioning

 

A, position attribute specifies the type of positioning element, which generally have the following four values:

The default static

Relative positioning relative

Absolute positioning absolute

Fixed positioning fixed

Element can be used at the top, bottom, left and right positioning properties. However, these attributes can not work unless it is first set to the position property, they also have different ways of working, depending on the positioning method.

Second, examples to explain

1, the default static

The default value of HTML elements, is not located, follow the normal flow of the document object. Static positioned elements will not be top, bottom, left, right influence.

2, the relative positioning relative

Offset position relative to itself an element, the element maintains the shape thereof is not positioned throw, which originally occupied the space will remain, sub-elements can be positioned with respect to the absolute element.

Actual case results:

 

 

 

3, absolute positioning absolute

Given absolutely positioned elements will be dragged from the document flow, use the left, right, top, bottom and other property with respect to absolute positioning for the nearest positioned parent element, if the parent element is not set targeting attribute, The top left corner as the reference for positioning the body element. Absolute positioning elements may be laminated, the order of lamination can be controlled by the z-index attribute, z-index values are unitless integer 0 Default large in the above, there may be negative.

Actual case results:

 

 

 

4, fixed positioning fixed

Not the space, relative to the browser window to locate, which means that even if the page scrolls, it will still remain in the same position, a fixed positioning of elements in the page does not retain its original proper gap.

Actual case results:

 

 

逆战班学习总结:定位在网页布局中也是经常会用到的,在使用的时候一定要考虑好定位值是否占空间,该使用哪一个,尤其是要注意绝对定位在使用的时候一定要搭配着相对定位使用才可以发挥作用。

Guess you like

Origin www.cnblogs.com/yiyi1234/p/12353385.html