In fact, to control the absolute positioning of the layer, you only need to understand the positioning in CSS.(Position)Definition, everything will become easy and simple.
Position in CSS is defined as follows:
Position)Allows you to precisely define the relative position of an element box. It can be relative to its usual location, relative to its parent element, relative to another element, or relative to the browser window itself. Each display element can be described by positioning, and its position is determined by the element inclusion block.
Contain Block)It is an associated scenario of the orchestration. For example, the content block of a bold element can be the section of the element, as shown in 1.
Before understanding the positioning, you must first understand the structure of the HTML file. For example, the content of an HTML file is as follows:
| The following is a reference clip: <HTML> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/> <Title> document structure </title> </Head> <Body> <H1> CSS rules <P> A style table consists of <strong> style rules </strong>. </P> <Ul> <Li> Selector <Ul> <Li> class selector </LI> <Li> ID selector </LI> <Li> <em> include </em> selector </LI> </Ul> </LI> <Li> attribute </LI> <Li> value </LI> </Ul> </Ul> </Body> </Html> |
The tree structure corresponding to this document, as shown in figure 2.
Most CSS capabilities are based on the "Parent-Child" Relationship of elements. In the family tree in Figure 2, each element is the "parent" or "child" or "child" of another element. For example, the body is both a child element of HTML and a parent element of H1, while HTML is the ancestor of H1, and H1 is the descendant of HTML.
Body is the ancestor of all elements displayed by browsers, while HTML is the ancestor of all elements, also known as "root element ".
So why are the elements that are located always coordinates in the upper left corner of the browser window?
Not every element can generate an inclusion block for its later generation.
The rules for creating blocks are as follows:
1. the inclusion block (also called the initial inclusion block) of the root element is generated by the user agent. In HTML, the root element is an HTML element, although some browsers may incorrectly use the body element.
2. For non-root elements that are not absolutely located, the element's contained block is set to the content edge of the nearest block-level ancestor element.
3. for non-root elements that use absolute (absolute) as the position (postition), contains the ancestor elements whose blocks are set to the nearest position (postition) rather than static (any type ). There are several situations:
A. If an ancestor element is a block-level element, it contains a block set as the padding edge of the ancestor element, that is, the area restricted by the border (Border ).
B. If the ancestor element is an inline element, it contains the content edge of the block set as the ancestor element.
Therefore, the absolute positioning element is usually located based on the coordinate origin on the top left of the visible area of the browser.
In CSS, the position attribute is used to select different positioning types.
Syntax:
Position: static | absolute | fixed | relative | inherit
The parameter meanings are as follows:
Static:Static (default) with no special positioning.
Relative:Objects cannot be stacked, but will be offset in normal document streams based on left, right, top, bottom, and other attributes.
Absolute:Absolutely, drag an object out of the Document Stream and use attributes such as width, height, left, right, top, and bottom to absolutely locate the object with margin, padding, and border, absolute positioning elements can have boundaries, but these boundaries are not compressed. Its stack is defined by the Z-index attribute.
Fixed:Floating, so that the element is fixed at a certain position on the screen. Its contained block is the visible area itself, so it does not scroll with the scroll bar. (Ie5.5 + does not support this attribute .)
Inherit:This value is inherited from its parent element.
Example:
| The following is a reference clip: Div { Position: absolute; Bottom: 1In; Left: 1In; Right: 1In; Top: 1In; } Div { Position: relative; Top:-3px; Left: 6px; } |
Now that you understand the concept of blocks, you can have a good grasp of the relationship between relative positioning and absolute positioning.
For example, if you need to center the entire page content and then absolutely locate some of the layers, you need to set the location attribute for the outermost layer.
| The following is a reference clip: <Body> <Div id = "box"> <Div id = "nav"> <P> each display element can be described by positioning, and its position is determined by the <strong> inclusion block </strong> of the element. </P> </Div> </Div> </Body> |
At this point, if you want to absolutely locate the nav, you need to set CSS:
| The following is a reference clip: Body { Margin: 0; Padding: 0; Text-align: center; } # Box { Background: # ff0; Position: relative;/* Make the BOX layer the inclusion block of its child element */ Width: 500px; Height: 200px; Margin: 0 auto; } # Nav { Background: # CCC; Position: absolute;/* the nav layer is definitely located within the border of the box Layer */ Top: 20px; Left: 40px; Width: 200px; } |
Its display effect is 3.
Therefore, it is not that difficult to locate a block.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
