Section 21.3. Positioning Basics


21.3. Positioning Basics

It is obvious by how readily web designers co-opted HTML tables that there was a need for page-like layout on web pages. Cascading Style Sheets provides several methods for positioning elements on the page relative to where they would normally appear in the document flow.

If you thought tables were tricky to manage, get ready for CSS positioning! While the positioning properties are fairly simple at face value, inconsistent and buggy browser implementation can make it challenging to achieve the results you're after on all browsers. If fact, positioning can be complicated even when the CSS Recommendation is followed to the letter. It's a recipe for frustration unless you get to know how positioning should behave and then know which browsers are likely to give you trouble (some notorious browser bugs are listed in Chapter 25). This section introduces the positioning-related properties as they are defined in CSS 2.1 as well as some key concepts.

21.3.1. Types of Positioning

To get the ball rolling, we'll look at the various options for positioning elements and how they differ. There are four types of positioning, specified by the position property.

position

Values:

     static | relative | absolute | fixed | inherit 

Initial value:

     static 

Applies to:

All elements

Inherited:

No

The position property identifies that an element is to be positioned and selects one of four positioning methods (each will be discussed in detail in upcoming sections in this chapter):


static

This is the normal positioning scheme in which element boxes are rendered in order as they appear in the document flow.


relative

Relative positioning moves the element box, but its original space in the document flow is preserved.


absolute

Absolutely positioned objects are completely removed from the document flow and are positioned relative to their containing block (discussed in the next section). Because they are removed from the document flow, they no longer influence the layout of surrounding elements, and the space they once occupied is closed up. Absolutely positioned elements always take on block behaviors.


fixed

Fixed positioning is like absolute positioning (the element is removed from the document flow), but instead of a containing element, it is positioned relative to the viewport (in most cases, the browser window).

21.3.2. Containing Blocks

The CSS 2.1 Recommendation states that "The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element." It is critical to have an awareness of the containing block for the element you want to position.

Unfortunately, it's not entirely straightforward and depends on the context of the element. CSS 2.1 lays out a number of rules for determining the containing block.

  • The containing block created by the root element (html) is called the initial containing block . The rectangle of the initial containing block fills the dimensions of the viewport. The initial containing block is used if there is no other containing block present. Note that some browsers base the initial containing block on the body element; the net result is the same in that it fills the browser window.

  • For elements (other than the root) that are set to static or relative, the containing block is the content edge of the nearest block-level, table cell, or inline-block ancestor.

  • For absolutely placed elements, the containing block is the nearest ancestor element that has a position other than static. In other words, the ancestor element must be set to relative, absolute, or fixed to act as a containing block for its children. Once an ancestor element is established as the containing block, its boundaries differ based on whether it is a block-level or inline element.

  • For block-level elements, the containing block extends to the element's padding edge (just inside the border).

  • For inline-elements, the containing block is set to the content edge. Its boundaries are calculated based on the direction of the text. For left-to-right languages, it begins in the top-left corner of the first line generated by the element and ends in the bottom-right corner of the last line generated by the element. For right-to-left languages, it goes from top-left corner of the first line to bottom-left corner of the last line.

  • If there are no ancestor elements, then the initial containing block is used.

21.3.3. Specifying Position

Once the positioning value has been established, the actual positioning is done with the four offset properties.

top, right, bottom, left

Values:

     <length> | <percentage> | auto | inherit 

Initial value:

     auto 

Applies to:

Positioned elements (where position value is relative, absolute, or fixed)

Inherited:

No

The values provided for each of the offset properties defines the distance that the element should be offset from that edge. For instance, the value of top defines the distance from the outer edge of the positioned element to the top edge of its containing block. Positive values move the element down (toward the center of the block); negative values move the element up (and out of the containing block). Similarly, the value provided for the left property specifies a distance from the left edge of the containing block to the left outer edge of the positioned element. Again, positive values push the element in toward the center of the containing block while negative values move the box outward.

CSS 2 positioned elements from their content edges, not their margin edges, but this was changed in 2.1.


This rather verbose explanation should be made clearer with a few examples of absolutely positioned elements. In this example, the positioned element is placed in the bottom-left corner of the containing block using percentage values (Figure 21-8).

     div {position: absolute; height: 120px; width: 300px; border: 1px solid #000;}     img {position: absolute; top: 100%; left: 0%;} 

Figure 21-8. Positioning with percentage values


In this example, pixel lengths are provided to place the positioned element at a particular spot in the containing element (Figure 21-9).

     div.a {position: absolute; height: 120px; width: 300px; border: 1px solid #000; background-color:#CCC}     div.b {position: absolute; top: 20px; right: 30px; bottom: 40px; left: 50px;  border: 1px solid #000; background-color:#666}     <div >         <div ></div>     </div> 

Figure 21-9. Positioning with pixel values


Notice that it is possible to set the dimensions of an element indirectly by defining the positions of its four sides relative to the containing block. The space that is leftover becomes the width and height of the element. If the positioned element also has specified width and height properties that conflict with that space, a set of CSS rules kicks in for settling the difference (these are addressed in the upcoming "Calculating Position" section).

Setting the width and height of elements is covered in Chapter 19.


This final example demonstrates that when negative values are provided for offset properties, the element can break out of the confines of the containing box (Figure 21-10).

     div.a {position: absolute; height: 120px; width: 300px; border: 1px solid #000; background-color:#CCC}     div.b {position: absolute; top: -20px; right: -30px; bottom: 40px; left: 50px; border: 1px solid #000; background-color:#666}     <div >         <div ></div>     </div> 

21.3.4. Handling Overflow

When an element is set to a size that is too small to contain all of its contents, it is possible to specify what to do with the content that doesn't fit using the overflow property.

Figure 21-10. Negative offset values


overflow

Values:

     visible | hidden | scroll | auto | inherit 

Initial value:

     visible 

Applies to:

Block-level and replaced elements

Inherited:

No

There are four values for the overflow property:


visible

The default value is visible, which allows the content to display outside its element box.


hidden

When overflow is set to hidden, the content that does not fit in the element box gets clipped and does not appear beyond its edges.


scroll

When scroll is specified, scrollbars (or an alternate scrolling mechanism) are added to the element box to allow scrolling through the content while keeping the content visible in the box area only. Be aware that the scroll value causes scrollbars to be rendered even if the content fits comfortably in the content box.


auto

The auto value allows the user agent to decide how to handle overflow. In most cases, scrollbars are added only when the content doesn't fit and they are needed.

Figure 21-11 shows examples of each of the overflow values as applied to an element that is 150 pixels square. The gray background color makes the edges of the content area clear.

Figure 21-11. Overflow values


21.3.5. Clipping Areas

When the overflow of an absolutely positioned element box is set to hidden, scroll, or auto, the CSS specification allows you to restrict which part of the content is visible by creating a clipping area for the element. A clipping area is a rectangular arealike the mat in a picture framethat lets the content show through. Other shapes may be included in future CSS versions. Specify the size and position of the clipping area with the clip property.

clip

Values:

     rect(top, right, bottom, left) | auto | inherit 

Initial value:

     auto 

Applies to:

Absolutely positioned elements

Inherited:

No

The default auto property sets the edge of the clipping path at the content edge for the given side. Values for clip must be provided in length values (percentage values are not permitted).

It is important to note that the top, right, bottom, and left values for the clip property are measured from the top-left corner of the element, not the sides as is the case for the offset properties. For languages that read right to left, distances are measured from the top-left corner.

This is a simple example of a clipping area applied to an element (Figure 21-12).

     div.a {position: absolute; height: 150px; width: 150px; background-color:#CCC;     clip: rect(10px, 130px, 130px, 10px);} 

Figure 21-12. A clipping area


21.3.6. Visibility

The visibility property is used to make an entire element invisible.

visibility

Values:

     visible | hidden | collapse | inherit 

Initial value:

     visible 

Applies to:

All elements

Inherited:

Yes

Obviously, if the value of visibility is visible (the default), the element will be visible. When it is set to hidden, the element is invisible, but it maintains its spot in the document flow; you just can't see it. This makes it distinctly different from display: none, which removes the element from of the document flow completely and closes up the space it once occupied.

In this example, an inline text element is hidden (Figure 21-13). It is easy to see that the space for its element box is preserved. Notice also that all aspects of the element (including its content, background, and border) are invisible as well.

     span.a {background-color:#CCCCCC; border: 1px solid #000;  visibility: visible;}     span.b {background-color:#CCCCCC; border: 1px solid #000; visibility: hidden;} <p>Aliquam pulvinar volutpat nibh. Integer convallis nulla sit amet magna. <span > Maecenas imperdiet turpis ac augue. Integer malesuada mauris a odio vulputate blandit.  Etiam accumsan. </span> Proin eros massa, condimentum sit amet, semper vitae, pulvinar non, augue.  </p> <p>Aliquam pulvinar volutpat nibh. Integer convallis nulla sit amet magna. <span > Maecenas imperdiet turpis ac augue. Integer malesuada mauris a odio vulputate blandit.  Etiam accumsan. </span> Proin eros massa, condimentum sit amet, semper vitae, pulvinar non, augue. </p> 

Figure 21-13. Setting visibility to hidden


The collapse property value is recommended for use with CSS table row and column elements . Applying the collapse value to a non-table element may make it hidden, but it is best avoided. Internet Explorer 6 for Windows and earlier does not support collapse (support has not been confirmed in Version 7, which is in beta as of this writing).

21.3.7. Stacking Order

One of the side effects of positioning is that elements can overlap each other. By default, elements stack in the order in which they appear in the document, with later elements rendering on top of preceding elements in the source. You can change the stacking order for an element by setting the z-index property. You can picture the direction of the z-axis as a line that runs from your nose through this page and out the other side.

z-index

Values:

     <integer> | auto | inherit 

Initial value:

     auto 

Applies to:

Positioned elements

Inherited:

No

The value of the z-index is any integer (whole number), positive or negative. The higher the number, the higher the element will appear in the stack. Lower numbers and negative values move the element lower in the stack.

Consider this source and style sheet that changes the stacking order for three positioned paragraphs (Figure 21-14). Although Paragraph 1 appears first in the source and would normally be overlapped by the subsequent positioned elements, it has been set to render on top by assigning it a higher z-index value.

     p {position: absolute; padding: 5px; color: #000;}     #p1 {top: 70px; left: 140px; width: 300px; z-index:19; background-color: #666;}     #p2 {top: 30px; left: 30px; width: 300px; z-index: 1; background-color: #999;}     span.b {position: absolute; top: 96px; z-index: 72; font-weight: bold; background: #999;}     <p >PARAGRAPH 1: Z-INDEX=19<br />Integer convallis nulla sit amet magna. Maecenas imperdiet turpis ac augue. Integer malesuada mauris a odio vulputate blandit.</p>     <p >PARAGRAPH 2: Z-INDEX=1<br /><span > Z-INDEX=72 Integer convallis nulla</span> sit amet magna. Maecenas imperdiet turpis ac augue.Integer malesuada mauris a odio vulputate blandit.</p> 

Figure 21-14. Adjusting stacking order with z-index


There are a few other points of interest in this example. First, notice that the z-index values don't need to be consecutive. If you want to guarantee that an element is always on top, you can give it an extremely high z-index value that isn't likely to be topped.

It is also important to note that each positioned element creates its own z-index context. Although the strong text contained in Paragraph 2 has a very high z-index of 72, it still appears behind Paragraph 1 with its z-index of 19. That's because the z-index settings within each element are relative only to the other descendants of that element. In effect, the strong element in Paragraph 2 shares the z-index value of its parent in relation to its parent's siblings.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net