Positioning Properties of Cascading Style Sheets (CSS)

tag, though you can also use them to style the position of an image, container, or block-level element within the browser. For layers, both the contents as well as the container can be styled with attributes in this category.

position: Determines how a styled element should be positioned in a browser window. Specify whether the position is absolute, fixed, relative, or static.

#footer { position: relative; }

When setting the position, use one of the following style values:

• absolute: Sets the element’s position absolutely based on the numeric values entered for the element’s placement relative to the upper-left edge of the browser window, or to the closest absolutely or relatively positioned parent element.

• fixed: Sets the element’s position absolutely based on the numeric values entered for the element’s placement relative to the upper-left edge of the browser window.

• relative: Sets the element’s position by the numeric values entered for the object’s placement relative to the styled element’s position in the file’s text flow.

• static: Sets the element in an exact location within the text flow.

width: Use this attribute to set the width of an element, such as a layer or other container, by using px, pt, in, cm, mm, pc, em, ex, %, or auto.

#layer1 {
width: 760px;
}

height: Use this attribute to set the height of an element, such as a layer, by using px, pt, in, cm, mm, pc, em, ex, %, or auto.

#layer1 {
height: 100px;
}

visibility: This attribute determines the initial visibility value of an element, which can be set to hidden, inherit, or visible, when the page first opens in a browser window.

#layer1 {
visibility: hidden;
}

Visibility should not be confused with the display attribute, which determines whether an element should be treated as a block or an inline element or be completely ignored by the browser with the display:none; attribute. With visibility, you’re dealing with the initial visibility state of an element, such as a layer, when the page first loads in the browser.

This attribute can also be toggled on and off by using JavaScript to hide and show elements on the page, thereby lending a bit of interactivity to the page for the visitor.

To modify the visibility of your element, add the visibility property to your CSS selector with one of the following values:

• hidden: This option hides a layer from displaying when a page initially opens in a browser.

• inherit: This option causes any layer to inherit the visibility of a parent layer; if a parent doesn’t exist, the layer will be visible. When the visibility is unspecified, inherit is the default attribute.

• visible: Choose this option to force the layer to be visible, regardless of any parent layer’s visibility setting, when the page first opens in a browser window.

z-index: This attribute specifies a layer’s stacking order relative to any other layers on the page as they are viewed in a browser.

Set the z-index to auto when the number is noncritical, set it to inherit to make the layer inherit a parent layer’s z-index value, or enter a specific positive or negative number, such as 1, 15, or 100, when the number is important relative to the other layers on the page.

The higher the number, the closer the layer appears to the front or top of the page closest to the visitor; the lower the number, the closer the layer appears to the browser’s background.

#lastchance {
z-index: 4;
}

The illustration shows an example of several layers on a page with different z-index values.

overflow: The overflow setting can be used to specify what happens to any contents within a layer that exceed the size of the layer as defined within the CSS. For instance, if a layer is 200px by 200px in size but contains a full page of text, the overflow setting determines how the text will fill the layer. Set the overflow attribute to auto, hidden, scroll, or visible.

#aboutus {
overflow: scroll;
}

Here is a description of each of the overflow values you can use:

• auto: Choose this option to have the browser automatically add scroll bars to the layer if and only if the contents exceed the layer’s defined width and height.

• hidden: When this option is selected, the size of a layer is maintained and any content exceeding that size is cut off or clipped from view in a browser window.

• scroll: Choose scroll to add scroll bars to the layer, regardless of whether the content fits or exceeds the layer’s width and height. This attribute isn’t uniformly supported by all browsers, so be sure to test it before publishing.

• visible: Choose this option to have the layer expand vertically and then horizontally, if needed, to fit any contents that exceed the specified layer width and height so that all the contents are visible.

Placement (left, top, right, bottom): Use the placement attribute to specify the exact size and location (based on the specified type) of a styled element in a browser window.

By default, the pixel size and placement of an element are specified for the top, left, bottom, and right edges. However, you can use other units (including pt, in, cm, mm, pc, em, ex, or %) if desired or set the value for any of the sides to auto. For layers, if the contents within that layer exceed the specified size, the layer expands to fit the contents.

#specialitems {
left: 500px;
top: 300px;
right: 0;
bottom: 0;
}

clip: Use this attribute to specify a smaller visible rectangular area within a layer relative to that layer’s upper-left edge. When clipped, the hidden area can be manipulated with JavaScript or other programming to create special effects that can hide and show the hidden content.

Set values for the clipped area to the top, left, right, and bottom edges of the layer by using px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage), or a value of auto.

#bunnygame {
clip: rect(10px,100px,0px,60px);
}