CSS Z-INDEX

Written by jon on 11:30 PM
Positioning of elements in CSS occurs in three dimensions, not just two. The third dimension is perpendicular to the screen, giving the screen a sense of depth. Elements can be overlapped, with “higher”, or “closer” elements obscuring elements that are “lower” or “farther away” (element transparency becomes an important issue with this capability.) The placement of elements along this third ‘z-axis’ is exactly what this property controls.

Each element’s rendering box is automatically assigned an integer z-index stacking level based on its context in the document. Boxes with greater z-axis numbers will appear in front of boxes with lower z-axis numbers (’0′ and negative numbers are allowed.)

Explicitly setting the ‘z-index’ property for an element box not only sets its z-position relative to other element boxes in its current context, it also initiates a new stacking context hierarchy, in which the current element box and its child elements partake.

If two or more boxes have the same stacking level within the same context, they are rendered back to front in the order of the document tree. If no ‘z-index’ property is set for an element box, it inherits the stacking level of its parent element box.

Example
h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px; z-index: 3 }

<h2 style=”display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px; z-index: 3;”>content</h2>

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent.
auto The stack level of the current element's box in the current context is the same as that of its parent's. A new local stacking context is not created.
[integer] This indicates the stack level of the current element's box in the current context. A new local stacking context is created by the current element, with its stack level being 0. Positive and negative integers are allowed.
No Comment comment | Posted in »  

CSS CLIP

Written by jon on 11:28 PM
A clipping area describes the portions of an element’s rendering box that are visible (when an element’s ‘overflow’ property is not set to ‘visible’.)
Parent element clipping regions also apply to calculating a current element’s clipping area; in cases where multiple clipping regions apply to an element, only the intersection of the multiple regions should be displayed. Be sure to take careful note of the syntax, source origin and what the measurements, as they confused me for a long time!

Example
p { overflow: scroll; position: absolute; width: 50px; height: 50px; clip: rect(5px 40px 40px 5px) }

<p style=”overflow: scroll; position: absolute; width: 50px; height: 50px; clip: rect(5px 40px 40px 5px)”>some formatted text</p>

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent.
auto The clipping region is the same size as the element's rendering box.
[shape] rect([top] [right] [bottom] [left])

This syntax defines a rectangular area where [top], [right], [bottom], and [left] are offsets from each respective side of the element's rendering box. In the future, other clipping shapes may be allowed.

No Comment comment | Posted in »  

CSS TEXT-OVERFLOW

Written by jon on 11:27 PM
Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow’ (set to “hidden” or “scroll” for this property to have an effect), and ‘clip’ properties define what content will be visible.
If text is too long for the overflow/clipping area and the content is to be visually clipped, this property allows the clipped content to be visually represented by the string “…” (called an “ellipsis”) in the non-clipped area.
This property only applies to text overflow content in the flow of text (horizontal for western text.) To explicitly force an overflow situation, content must be in either a NOBR element or an element with the ‘white-space’ property set to “nowrap” - otherwise, only a natural non-breaking word existing at the clipping boundary will induce this property to have an ellipsis effect (if the property is thus set.)
The clipped content can still be selected by selecting the ellipsis. When selected, the ellipsis will disappear and be visually replaced by as much of the the text content as is possible to display in the clipping area.

Example
div { position: absolute; left: 20px; top: 50px; width: 120px; height: 50px; border: thin solid black; overflow: hidden; text-overflow: ellipsis }

<div style=”position: absolute; left: 20px; top: 50px;
width: 120px; height: 50px; border: thin solid black;
overflow: hidden; text-overflow: ellipsis”>

<nobr>This is a NOBR section</nobr>

</div>

Possible Values
Value Description
clip Clips the viewable content to the area defined by the rendering box, the ‘overflow', and ‘clip' property values.
ellipsis If text content will overflow, display the string “…” in the visibly-rendered region for content outside the visible area.
1 comments comment | Posted in »  

CSS OVERFLOW-Y

Written by jon on 11:25 PM
Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow-y’ property describes what to do with the content that exceeds the element’s height.

Example
blockquote { width: 50px; height: 50px; overflow-y: scroll }

<blockquote style=”width: 50px; height: 50px; overflow-y: scroll”>some text</blockquote>

Possible Values
Value Description
visible Content is not clipped and may be rendered outside of the element's box.
hidden Content is clipped and content outside of the element's box is not visible. The size of the clipping region is defined by the ‘clip' property.
scroll Content is clipped as necessary, but a vertical scrollbar is made available where necessary to view the additional, non-visible content. If the Visual media in use is static (such as Print) the content should be treated as if the value was ‘visible'.
auto This value is browser and media dependent, but should allow for a vertical scrollbar if possible in case of overflow.
No Comment comment | Posted in »  

CSS OVERFLOW-X

Written by jon on 11:23 PM
Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow-x’ property describes what to do with the content that exceeds the element’s width.

Example
blockquote { width: 50px; height: 50px; overflow-x: scroll }

<blockquote style=”width: 50px; height: 50px; overflow-x: scroll”>some text</blockquote>

Possible Values
Value Description
visible Content is not clipped and may be rendered outside of the element's box.
hidden Content is clipped and content outside of the element's box is not visible. The size of the clipping region is defined by the ‘clip' property.
scroll Content is clipped as necessary, but a horizontal scrollbar is made available where necessary to view the additional, non-visible content. If the Visual media in use is static (such as Print) the content should be treated as if the value was ‘visible'.
auto This value is browser and media dependent, but should allow for a horizontal scrollbar if possible in case of overflow.
No Comment comment | Posted in »  

CSS OVERFLOW

Written by jon on 11:21 PM
Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow’ property describes what to do with the content outside the elements rendering area.

Example
blockquote { width: 50px; height: 50px; overflow: scroll }

<blockquote style=”width: 50px; height: 50px; overflow: scroll”>some text</blockquote>

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent.
visible Content is not clipped and may be rendered outside of the element's box.
hidden Content is clipped and content outside of the element's box is not visible. The size of the clipping region is defined by the ‘clip' property.
scroll Content is clipped as necessary, but scrollbars are made available where necessary to view the additional, non-visible content. If the Visual media in use is static (such as Print) the content should be treated as if the value was ‘visible'.
auto This value is browser and media dependent, but should allow for a scrollbar if possible in case of overflow.
No Comment comment | Posted in »  

CSS VERTICAL-ALIGN

Written by jon on 11:20 PM
Element content is typically vertically centered on a rendered line (with extra line-height amounts distributed equally on the top and bottom.) This property allows in-line content boxes to be vertically aligned with respect to several different criteria on a rendered line.

Example
img.left { vertical-align: top }

<img style=”vertical-align: top” src=”image.gif” mce_src=”image.gif” >

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent.
baselinemiddle baseline - Aligns the baseline of the current element with the baseline of the parent element box. If the current element does not have a baseline, the bottom of the current element's box should be used.

middle - Aligns the vertical midpoint of the current element box with the baseline plus half the x-height of the parent.

topbottom top - Aligns the top of the current element with the top of the tallest element on the currently rendered line.

bottom - Aligns the bottom of the current element with the bottom of the lowest element on the currently rendered line.

text-toptext-bottom text-top - Aligns the top of the current element with the top of the parent element's font.

text-bottom - Aligns the bottom of the current element with the bottom of the parent element's font.

supersub super - The baseline of the current element box is aligned to the baseline of other superscripted elements in the parent element's box.

sub - The baseline of the current element box is aligned to the baseline of other subscripted elements in the parent element's box.

[length] This specifies an exact distance to raise or lower the current element from the default ‘baseline' value. Positive values are above the baseline, while negative values are below.
[percentage] This specifies a distance to raise or lower the current element from the default ‘baseline' value. Positive percentages are above the baseline, while negative values are below. The percentage value is relative to the current element's ‘line-height' property.
No Comment comment | Posted in »  

CSS LEFT

Written by jon on 11:18 PM
This describes the horizontal offset for the left edge of the absolutely positioned element box from the left edge of the element’s containing block. For relatively positioned boxes, the offsets are relative to where the box would appear normally in the document flow. Positive values are to the right of the parent block’s left edge and negative values are to the left.

Example
h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px }

<h2 style=”display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px”>content</h2>

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent.
auto Default offset in the regular layout of the page.
[length] Refers to an absolute distance from the reference containing block. Negative values are allowed.
[percentage] Refers to a percentage of the height of the parent containing block. If the parent containing block does not have an explicit value, this value is interpreted like ‘auto'.
No Comment comment | Posted in »  

CSS BOTTOM

Written by jon on 11:17 PM
This describes the vertical offset for the bottom edge of the absolutely positioned element box from the bottom edge of the element’s containing block. For relatively positioned boxes, the offsets are relative to where the box would appear normally in the document flow. Positive values are above the parent block’s bottom edge and negative values are below.

Example
h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px }

<h2 style=”display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px”>content</h2>

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent.
auto Default offset in the regular layout of the page.
[length] Refers to an absolute distance from the reference containing block. Negative values are allowed.
[percentage] Refers to a percentage of the height of the parent containing block. If the parent containing block does not have an explicit value, this value is interpreted like ‘auto'.
No Comment comment | Posted in »  

CSS RIGHT

Written by jon on 10:46 PM
This describes the horizontal offset for the right edge of the absolutely positioned element box from the right edge of the element’s containing block. For relatively positioned boxes, the offsets are relative to where the box would appear normally in the document flow. Positive values are to the left of the parent block’s right edge and negative values are to the right.

Example
h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px }

<h2 style=”display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px”>content</h2>

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent.
auto Default offset in the regular layout of the page.
[length] Refers to an absolute distance from the reference containing block. Negative values are allowed.
[percentage] Refers to a percentage of the height of the parent containing block. If the parent containing block does not have an explicit value, this value is interpreted like ‘auto'.
No Comment comment | Posted in »  

CSS TOP

Written by jon on 7:03 AM
This describes the vertical offset for the top edge of the absolutely positioned element box from the top edge of the element’s containing block. For relatively positioned boxes, the offsets are relative to where the box would appear normally in the document flow. Positive values are below the parent block’s top edge and negative values are above.

Example
h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px }

<h2 style=”display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px”>content</h2>

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent.
auto Default offset in the regular layout of the page.
[length] Refers to an absolute distance from the reference containing block. Negative values are allowed.
[percentage] Refers to a percentage of the height of the parent containing block. If the parent containing block does not have an explicit value, this value is interpreted like ‘auto'.

No Comment comment | Posted in »  
Subscribe to: Posts (Atom)

RECENT COMMENTS

SUBSCRIBE TO CSS3 EXAMPLES
 Subscribe to css3 Examples via RSS
Or, subscribe via email:
Find CSS3 Examples Entries :