CSS Positioning (Positioning) property allows you to position elements.
CSS positioning and floating
CSS provides several attributes for positioning and floating, the use of these properties, you can create a column layout, a portion overlapping with another part of the layout, you can also complete the task often requires the use of multiple forms over the years to complete.
The basic idea of positioning is very simple, it allows you to define the position of the element relative to its normal position box should appear, or relative to the parent element, the other element of the browser window even position itself. Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
Everything is box
div, h1 or p element is often referred to as block-level elements. This means that these elements are displayed as a piece of content , namely "block box." In contrast, strong and span elements such as "inline element", because their contents in rows, i.e., "inline boxes."
You can change the type of display attributes generated box. This means that behave like block-level elements, like by the display property to block, allow inline elements (such as <a> elements). The display can also be set to none, so that there is no element generated box. In this case, the box and all its contents will no longer appear, do not take up space in the document.
In one case, however, even if not explicitly defined, also creates block-level elements. This happens to add some text to a block-level elements (such as div) at the beginning. Even without these text defined as a paragraph, it will be treated as a paragraph:
<div> some text <p>Some more text.</p> </div>
In this case, the box is called anonymous block box, because it is not associated with the elements specifically defined.
Text line block-level elements similar situation also occurs. Suppose there are three lines of text comprises a paragraph. Each line of text forming an unknown frame. No direct line of anonymous blocks or apply a style box, because there is no place to apply styles (Note that the line boxes and inline boxes are two concepts). However, it helps to understand everything on the screen to see all form some sort of box.
CSS positioning mechanism
There are three basic CSS positioning mechanism: the general flow, float, and absolute positioning.
Unless specified otherwise, all boxes are located in the general stream. That is, the position of the element in the normal stream is determined by the position of the element (X) HTML is.
Block-level block from top to bottom are arranged one after another, the vertical distance between the frames is calculated from the vertical from the outer frame.
Inline boxes are arranged horizontally in a row. Horizontal padding may be used, borders and padding to adjust their spacing. However, the vertical margins, borders, margins, and does not affect the height of the row of the inner frame. Horizontal frame is formed by a line called line box (Box Line) , line box height is always enough to hold all rows of the inner frame it contains. However, you can set the row height to increase the height of the box.
CSS position property
By using the position property, we can choose four different types of positioning, which affects the way the element box generated.
Property value position meanings:
static
element normal block generation. Block-level elements generate a rectangular frame, as part of the document stream, inline elements is created one or more line boxes, placed in the parent element.
static is the default position attribute, the default positioning of all elements is position: static.
relative
elements from a frame shift. Element shape before their remains unlocated, the space it had occupied remains.
You can use top, bottom, left and right with respect to the original position of the element in the document to move this element.
absolute
element block flow completely removed from the document, and positioned relative to its containing block. Containing block may be another element in the document is initially contained or blocks. Original elements in the normal flow of the document space occupied will be closed, as if the elements of the original does not exist. Generating a block-level element positioned after the frame, regardless of what type of frame it had generated in the normal stream.
Top can be accurately set in accordance with, bottom, left and right to position
fixed
elements of the frame is similar to the performance position is set to absolute, but which is comprising block window itself.
This property is often used in a fixed position on the suspension element in the page. Modules such as the right answer to the present page.
Note: ie6 does not support this property
