Position

web front end six thousand and one hundred 13 years ago (2011-03-23)

Using CSS to locate the inner layer of a page has always been difficult to master. In many cases, elements that are absolutely located are always browser The upper left corner of is the coordinate origin. At this time, if the size of the browser changes, the defined layer will deviate from the desired position in the design, which makes people scratching their heads.

In fact, if you want to control the absolute positioning of layers, as long as you understand the definition of position in CSS, everything will become easy and simple.
The definition of position in CSS is as follows:

Position allows the user to precisely define the relative position of the element box, which can be relative to its usual position, 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 containing block of the element.

The containing block is the associated scene where formatting occurs. For example, the containing block of a bold element can be the paragraph where the element appears
Before understanding positioning, first understand the structure of the HTML file. For example, there is an HTML file with the following contents:

Most capabilities of CSS are based on the "parent-child" relationship of elements. In the family tree in Figure 2, each element is the "parent" or "child" of another element or both. For example, body is both the child element of html and the parent element of h1. html is the ancestor of h1, and h1 is the descendant of html.


Body is the ancestor of all elements that can be displayed by the browser, while html is the ancestor of all elements, also known as the "root element".

Then why do the positioned elements always take the upper left corner of the browser window as the coordinate?

Because not every element can generate an include block for its descendants.

The rules for creating include blocks are as follows:

1. The "root element" containing block (also called the initial containing block) 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 containing block of the element is set to the edge of the content area of the nearest block level ancestor element.

3. For those non root elements that use absolute as the position, include ancestor elements (any type) whose block is set as the nearest position and is not static. There are the following situations:

a. If the ancestor element is a block element, it contains the padding edge of the block set as the ancestor element, that is, the area constrained by the border

b. If the ancestor element is an inline element, the containing block is set as the content edge of the ancestor element.

Therefore, absolute positioning elements are often positioned with the upper left of the browser's viewing area as the coordinate origin.

In CSS, you can use the position attribute to select from different positioning types.

Syntax:

  position : static | absolute | fixed | relative | inherit

The meaning of each parameter is:

Static: static (default), no special positioning.

Relative: Relative. Objects cannot be stacked, but will be offset in the normal document stream according to left, right, top, bottom and other attributes

Absolute: absolute, drag the object out of the document stream, and perform absolute positioning with margin, padding, border through width, height, left, right, top, bottom and other attributes. Elements that are absolutely positioned can have boundaries, but these boundaries are not compressed. Its cascade is defined by the z-index attribute.

Fixed: Suspend to fix the element at a certain position on the screen. Its containing block is the visual area itself, so it does not scroll with the scroll bar. (IE5.5+does not support this property.)

Inherit: This value is inherited from its parent element.

The following are reference clips:
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 containing blocks, you can grasp the relationship between relative positioning and absolute positioning.

For example, if you need to center the page content as a whole, and then position some of the layers absolutely, you need to set the positioning property of the outermost layer.

The following are reference clips:

Each display element can be described by positioning, and its position is determined by the containing block of the element.

 

The following are reference clips:
body {
margin:0;
padding:0;
text-align:center;
}
#box{
background:#ff0;
position:relative; /* Make the box layer the containing block of its descendant elements*/
width:500px;
height:200px;
margin:0 auto;
}
#nav {
background:#ccc;
position:absolute; /* The nav layer will be absolutely positioned within the box layer's border*/
top:20px;
left:40px;
width:200px;
}

Therefore, once you master the concept of containing blocks, positioning becomes less difficult.