Shulou(Shulou.com)06/02 Report--

Html5 positioning of which, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

There are five kinds of html5 positioning: 1, absolute positioning (absolute), 2, relative positioning (relative), 3, fixed positioning (fixed), 4, viscous positioning (sticky), 5, static positioning (static).

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Several Positioning methods in html5

Position sets the position of a block-level element relative to its parent block and relative to itself

1. Absolute positioning (absolute)

Features:

If there is no parent element, the reference is the entire document

By default, the reference is the parent element that has been positioned

Adding absolute positioning elements will break away from the whole layout flow and destroy the layout space.

The absolute positioning element is dragged from the document flow, and the attributes such as left, right, top, bottom, etc. are used for absolute positioning relative to the nearest parent element with positioning settings. If the parent of the element does not set positioning attributes, it is positioned according to the upper-left corner of the body element as a reference. Absolute positioning elements can be cascaded, the cascading order can be controlled by the z-index attribute, the z-index value is a unitless integer, large on top, can have negative values.

Absolute positioning method: if its parent element is positioned other than static, such as position:relative or position:absolute and position:fixed, then it will be positioned relative to its parent element. The location is specified by left, top, right, and bottom attributes. If its parent element does not set positioning, then it depends on whether the parent element of its parent element has set positioning, and if it still does not, continue to infer to higher-level ancestor elements. In short, its positioning is relative to the first ancestor element that has set positioning in addition to static positioning, if all ancestral elements do not have one of the above three positioning, then it will be positioned relative to the document body (not relative to the browser window, relative to the window positioning is fixed).

.box {background: red; width: 100px; height: 100px; float: left; margin: 5px;} .two {position: absolute Top: 50px; left: 50px;} One Two Three Four

Position the div of the class= "two" to the top and left side of the distance, respectively, 50px. Changes the layout of other elements and does not leave a blank space in the original location of this element.

2. Relative positioning (relative is equivalent to the scene of soul out-of-body)

Features:

The reference is its default position.

Occupy space

Does not destroy the layout flow

Relative positioning elements cannot be cascaded, and their positions are offset in the normal document stream according to attributes such as left, right, top, bottom, etc. You can also use z-index hierarchical design.

.box {background: red; width: 100px; height: 100px; float: left; margin: 5px;} .two {position: relative Top: 50px; left: 50px;} One Two Three Four

Position the div of the class= "two" to 50px at the top and left of its original position, respectively. The layout of other elements will not be changed, leaving a blank space in the original location of this element.

3. Fixed positioning (fixed)

Features:

The reference is the browser window

Fixed positioning is similar to absolute positioning, but it is positioned relative to the browser window and does not scroll with the scroll bar.

One of the most common uses of fixed positioning is to create a fixed head, foot, or sidebar in a page without using margin, border, or padding.

How to center an element around the browser window:

Method 1:

Position:fixedleft:50%;top:50%;margin-left:-half the width of the box, half the height of the margin-top:- box.

Method 2:

Position:fixed;left:0;right:0top:0bottom:0margin:auto

4. Sticky positioning (compatibility problem exists in sticky)

Features:

It's a combination of relative and fixed

When the page does not trigger the scroll bar, the effect of execution is position:relative, whereas the execution of position:fixed

The application is: top of the page

Section:first-child {height: 200px; background-color: lightgray;} section:nth-child (2) {height: 100px; background-color: orange Position: sticky; position:-webkit-sticky; top: 50px;} section:nth-child (3) {height: 300px Background-color: lightgray;} section:nth-child (4) {height: 100px; background-color: orange; position: sticky Position:-webkit-sticky; top: 150px;} section:last-child {height: 500px; background-color: darkgray } SECTION-1 SECTION-2 SECTION-3 SECTION-4 SECTION-5

5. Static positioning (static default)

When you do not specify a positioning method for an element (such as div), the default is static, that is, according to the flow positioning of the document, put the element in an appropriate place. Therefore, under different resolutions, the use of flow positioning can be very self-adaptive and achieve a relatively good layout effect.

In general, we do not need to specify that the current element is positioned as static-- because this is the default positioning. Unless you want to override the location system inherited from the parent element.

The left,top attribute has no effect on static, and static is located by margin.

To

After reading the above, have you mastered the methods of html5 positioning? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.