The z - index Property
Elements positioned using absolute and relative positioning often overlap other elements. When this happens the default behavior
is to have the first elements underneath later ones. This is known as stacking context . You can specify which of the boxes appears
on top using the z - index property. If you are familiar with graphic design packages, the stacking context is similar to using
the “ bring to top ” and “ send to back ” features.
The value of the z - index property is a number, and the higher the number the nearer the top that element should be displayed
<p class=”one”>Here is paragraph <b>one</b>. This will be at the top of the
<p class=”two”>Here is paragraph <b>two</b>. This will be underneath the
<p class=”three”>Here is paragraph <b>three</b>. This will be at the bottom
of the page.</p>
------------ style -----------------
border-style:solid; border-color:#000000; border-width:2px;}
left:150px; top: 25px;}
Floating Using the float Property
The float property allows you to take an element out of normal flow and place it as far to the left or right of a containing box as possible.
Anything else that lives in the containing element will flow around the element that is associated with the float property
Whenever you specify a float property on an element, you must also set a width property indicating the width that the box should take up;
otherwise, it will automatically take up 100 percent of the width of the containing box, leaving no space for things to flow around it and
therefore making it appear just like a plain block - level element .
To indicate that you want a box floated either to the left or the right of the containing box, you set the float property
||The box is floated to the left of the containing element and the content of the containing element will flow to the right of it.
||The box is floated to the right of the containing element and the content of the containing element will flow to the left of it.
||The box is not floated and remains where it would have been positioned in normal flow.
||The box takes the same property as its containing element.
When a box uses the float property, vertical margins will not be collapsed above or below it like block boxes in normal flow can be.The floated box will
be aligned with the top of the containing box.
< body >
< h1 > Heading < /h1 >
< p class=”pullQuote” > Here is the pullquote. It will be removed from
normal flow and appear on the right of the page. < /p >
< p > This is where the story starts and it will appear at the top of the
page under the heading. You can think of it as the first paragraph of an
article or story. In this example, the pull quote gets moved across to the
right of the page. There will be another paragraph underneath. < /p >
< p > Here is another paragraph. This one will be at the bottom of the page. < /p >
< /body >
--------- style ----------------
border: 1px solid #000000;}
border:2px solid #000000;
The clear Property
The clear property is especially helpful when working with boxes that are floated.
||The element with the clear property cannot have content on the left hand side of it.
||The element with the clear property cannot have content on the right hand side of it.
||The element with the clear property cannot have content to the left or right of it.
||Allows floating on either side.
To ensure that the second paragraph does not wrap around the pull quote, we use the clear property on
the rule for the < p > elements indicating that nothing should appear to the left of it;
border:2px solid #000000;
< body >
< h1 > Cascading Style Sheets < /h1 >
< div class=”nav” > < a href=”../index.htm” > Examples index < /a >
& nbsp; < a href=”download.html” > Chapter 8 Code < /a > < /div >
< h2 > CSS Positioning < /h2 >
< p class=”abstract” > < img class=”floatLeft” src=”images/background.gif”
alt=”wrox logo” / > This article introduces the topic of laying out
web pages in CSS using a combination of positioning schemes. < /p >
< p > CSS allows you to use three different positioning schemes to create
complex layouts: < /p >
< ul >
< li > Normal flow < /li >
< li > Absolute positioning < /li >
< li > Floating < /li >
< /ul >
< p > By using a combination of these schemes you do not need to resort to
using tables to lay out your pages. < /p >
< /body >