CSS Self-Study notes (7): CSS Positioning

Many times, we need to customize some elements of the ordering, layout, etc., this is the need to use CSS positioning properties, with these attributes to some elements of the custom sorting, layout, etc., you can change the default browser of the rigid sorting.

The functionality of CSS positioning is easy to understand, allowing you to define where the element box should appear relative to its normal position, or relative to the parent element, another element, or even the location of the browser window itself.

The positioning (position) property of the CSS has four different positioning types, which affects how the element box is claimed.

CSS Inner Margin properties

Properties	Description	Notes
Static	Element box is generated normally	Block-level elements generate a rectangular box that acts as part of the document flow. Inline elements Create one or more line boxes that are placed in their parent elements.
Relative	Element box offset a distance	The element still retains its pre-positioned shape, and the space it originally occupies remains.
Absolute	The element box is completely removed from the document flow and is positioned relative to its containing block	The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.
Fixed	The element box behaves like the position is set to absolute, but its containing block is the window itself.

CSS positioning mechanism: normal flow, floating, positioning

1. Normal flow

The position of the element box in the normal stream is determined by the position in the (X) HTML.

Block-level elements are arranged from top to bottom.

The vertical distance between boxes is calculated by the box margin property, and the inline elements are horizontally laid out in one row.

2. Positioning

Positioning has relative positioning and absolute positioning of the points.

relative positioning , is the element to be positioned (relative to the position in the normal flow) offset a distance, the element retains its previous shape is not positioned, the original space occupied by the remaining. Moving an element may overwrite other elements.

#box_relative {  position:relative;  left:30px;  top:20px;}

Absolute Positioning is the element box that will be positioned is completely removed from the normal stream and positioned relative to its containing block (which may be another element in the document or an initial containing block). The space that the element originally occupied in the normal stream is closed.

#box_relative {  position:absolute;  left:30px;  top:20px;}

The position of an absolutely positioned element is relative to the nearest positioned ancestor element , and if the element does not have a positioned ancestor element, then its position is relative to the original containing block .

Note: Absolute positioning is independent of normal flow, so it can overwrite other elements on the page, and you can control the stacking order of these boxes by setting the Z-index property.

3. Floating

floating , you can move the element box left and right, only to its edge touch the containing box or another floating box. The floating box is out of the ordinary stream.

If the inclusion box is too narrow to accommodate three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If the height of the floating elements is different, then they may be "stuck" by other floating elements when they move down

In CSS, we can use the Float property to do the floating effect.

The floating effect can be used in many elements

div{  float:right;  width:120px;  margin:0 0 15px 20px;  padding:15px;  border:1px solid black;  Text-align:center;}

Float the first character of the paragraph to the left and add a style to the character

span{  Float:left;  Width:0.7em;  font-size:400%;  Font-family:algerian,courier;  line-height:80%;}

You can also use a floating effect to complete a list of menus with hyperlinks

ul{  Float:left;  width:100%;  padding:0;  margin:0;  List-style-type:none;} a{  Float:left;  Width:7em;  Text-decoration:none;  Color:white;  Background-color: #06C;  Padding:0.2em 0.6em;  border-right:1px solid White;}