21.3. Positioning BasicsIt 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 PositioningTo 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.
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):
21.3.2. Containing BlocksThe 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.
21.3.3. Specifying PositionOnce the positioning value has been established, the actual positioning is done with the four offset properties.
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.
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 valuesIn 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 valuesNotice 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).
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 OverflowWhen 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
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:
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 values21.3.5. Clipping AreasWhen 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.
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 area21.3.6. VisibilityThe visibility property is used to make an entire element invisible.
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 hiddenThe 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 OrderOne 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.
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-indexThere 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. |