Il posizionamento dei blocchi con i css

Esercizio introduttivo che non usa il posizionamento ma solo le proprietà Float e Clear

esercizio: template due colonne header e footer

Positioning - Posizionamento



Le proprietà di Posizionamento CSS consentono di posizionare un elemento HTML sulla pagina, sovrappore più elementi, controllare cosa succede se il contenuto dell'elemento è più grande del contenitore (overflow),

Le proprietà Top, Left, Bottom, Right specificano la posizione del blocco.
NB: il blocco deve essere esplicitamente posizionato perché le regole siano applicate. Queste proprità hanno effetti diversi a seconda del posizionamento



i quattro valori della proprietà Positioning .


Posizionamento Static


Si tratta del posizionamento di default dei blocchi: seguono il flusso HTML normale : non funzionano le proprietà top, bottom, right e left


Posizionamento Fixed


An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled:
Example

#blocco-fisso
{
position:fixed;
top:30px;
right:5px;
}




Note: Internet Explorer supports the fixed value only if a !DOCTYPE is specified.

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

Fixed positioned elements can overlap other elements.
Posizionamento Relative

A relative positioned element is positioned relative to its normal position.


The offset values are specified using a combination of the top, right, left and bottom style properties. The value of each is interpreted as the distance the box's corresponding outer edge should be moved with respect to its original position in the normal flow.
Note that opposing offsets are constrained. For example, if you specify both left and right and the value of one is not the exact negative of the other, the right setting will be ignored. A specific width setting may also cause an offset to be ignored. The same is true of the top, bottom and height properties.
In practice, you'll probably want to specify only one of left and right and one of top and bottom.


Example
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Try it yourself »

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Example
h2.pos_top
{
position:relative;
top:-50px;
}

Try it yourself »

Relatively positioned elements are often used as container blocks for absolutely positioned elements.
Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
Example
h2
{
position:absolute;
left:100px;
top:150px;
}

The position of an absolutely positioned element is determined by its offset values: top, right, bottom and left. These values work in much the same way as with relatively positioned elements.
But unlike relative positioning, where the offsets are measured from the element's position in the normal flow, an absolutely positioned element is offset from its container block.



Try it yourself »

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.

Absolutely positioned elements can overlap other elements.
Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

Try it yourself »

An element with greater stack order is always in front of an element with a lower stack order.

Note: If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.







Container Block for Absolutely Positioned Elements

The containing block of an absolutely positioned element is defined a little differently than it is for other elements. The containing block for an absolutely positioned element is established by its closest, positioned ancestor. That is, the nearest element outside it that has a position of absolute, relative or fixed. If there is no such ancestor element, the initial containing block (the browser window) is used.




La negletta proprietà Clip http://www.ibloomstudios.com/articles/misunderstood_css_clip/