|
CSS-P (positioning) Positioning Properties Positioning Properties Okay, that is enough talk. Here we go!
Preview by clicking the Preview button below. You should have seen something like this... This is the first CSS layer This is the second CSS layer Let me explain. We added the following position properties: position, top, left, and z-index. The position property can have one of three values, static,relative, and absolute. If we don't declare a position property then the default position property is static. position:static means that the blocked off area will stay inline as normal HTML and can't be changed with the top and left properties. So to actually change the position (or be able to change the position later) we must declare the position to be either relative or absolute. Position:Absolute declares that when we give the top and left then the coodinates are given absolutely relative to the top left hand corner of the web page. For instance top:100; would be 100 pixels from the top of the web page and left:100 would be 100 pixels from the left border of the web page. This is what we did above. However, if the element is nested in another positioned element then the absolutely positioned element will treat the top-left corner of it's parent element as the starting point instead of the top-left corner of the web page. For instance, here is an absolutely positioned element nested in an absolutely positioned element:
Preview by clicking the Preview button below. Position:Relative; means that we are postioning the element relative to where it would normally be in the "flow" of the HTML. In other words, we can move the element from it's "natural" place in the HTML page. So a relatively postioned element that has top:50; would be 50 pixels down from where is would be if we didn't position it, and left:50; would be 50 pixels left of it's normal position. I'll let you experiment with this. Try putting replacing position:absolute; with position:relative; and nesting and not nexting the elements. We can also put an absolutely positioned element in a relatively positioned element and vica versa. For instance we can make a drop shadow this way to make it look like a hovering object above the page. For instance, try this:
Preview it. Notice we used the bold tag <b> to position. This is because I wanted to use the inherted bold property of the tag to make the words bold. Also, I wanted to show you we can position any element. Notice also that we can use negative numbers for the values of top and left. We can also use percentage values. top:30%; means 30% of the height of parent element. left:40%; would mean 40% of the width of the parent element. (Of course, the parent element can be the whole document). We have been using the z-index property, which is the stacking order of the elements. The highest number is on top, the lowest number is on bottom, etc. Except when an element is nested in another element, in that case the element nested inside is always stacked higher than the parent. So the stacking order is always relative to other elements nested with the same parent. Here is an example to try:
Preview it and notice the stacking order. You see, even though the purple layer had a z-index of 3 it was nested in a layer that had index 1, which is under the layer with index 2. That is all there is to CSS Positioning! Of course in a later lab we will dynamically change the positioning properties to make animations and drop down menus,etc. Let's step back and take a look at the border and margin properties. |