Web Front End Interview Guide (10): What are element positioning?

Comments

In the Web front-end, the element positioning is must grasp, is the Web page production of the necessary skills, but also to measure whether a qualified web front-end development of one of the standards, in the web design, many places need to use positioning, such as menu pop-up, prompting information layer and so on need to locate. So the difficulty of the subject is simple.

Thinking of solving problems

Position the property for the element, including the following property values

1. Absolute Absolute Positioning

The relative position locates the parent element as the first parent element that is not static.

650) this.width=650; "Src=" http://img.blog.csdn.net/20160923112848345?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "Style=" Border:none; "/>

2. fixed positioning (old IE6 not supported)

Positioned relative to the browser window.

650) this.width=650; "src=" http://img.blog.csdn.net/20160923112932846 "style=" border:none; "/>

3. relative relative positioning

Positioned relative to its normal (default layout) position.

650) this.width=650; "src=" http://img.blog.csdn.net/20160923113003065 "style=" border:none; "/>

4. Static

The default value. No positioning, element appears in normal stream (ignore top, bottom, left, right Z-index declaration)

Add sub-item

1. All positioning if the left, top, right, and bottom properties are the default values, the default location is

2. Absolute positioning is detached from the document, floats, multiple layers overlap can be changed by using the Z-index property stacking order

3. Absolute positioning ignores padding, relative position is relative to the upper-left inner border of the container,

650) this.width=650; "src=" http://img.blog.csdn.net/20160923113032575 "style=" border:none; "/>

-------------------------------------------------------------------------------------------

This article from "Wisdom 1" blog, reproduced please contact the author!

Web Front End Interview Guide (10): What are element positioning?