CSS allows us to position page elements in new ways.
First we have to take a quick look at the space we have to work in.
There are actually two windows in the browser.
There is the whole browser window, which contains the controls, scroll bars, status line, etc.
Then there is the live window.
This is the space inside the browser we actually get to work with.
Positioning in CSS is done relative to the surrounding element. Recall the discussion about the margins, border and padding around CSS blocks. The position of the entire web page, the block represented by the body tag, is measured as a distance from the origin. The origin in this case is the upper left corner of the live window. When we get further into the page, the origin is the upper left corner of the surrounding or parent block. For example, the position of frames is relative to the upper left corner of the body tag and the position of things in the frame are relative to the upper left corner of the frame.
There are for classes of positioning in CSS using the position property. The default is static. This positions the elements in the order they appear. Each element appears after the one that comes before it in the HTML file and before the ones that come after. Once an element is positioned, we can't change it. The relative setting is the most useful. It initially positions the element just like static but we can move it after that. The movement is relative to its normal position. There are two properties that control this. The top changes the position relative to the top of the parent element. The left property does the same thing from the left edge. These can take negative values. Increasing the top value moves it down the page. Increasing the left value moves it right on the page.
Here is an example of relative positioning. I have a block of text and a picture and I move the text to the left to put it partially over the picture. I put a border around the text to make it stand out more.
absolute is just that. Treats the element like a separate little window that can be position at specific x and y coordinates. The fixed position doesn't work in most browsers. But if it did, it works like absolute, but the element doesn't scroll, even if the rest of the page does.
We can also position the element out from the page.
This is referred to as the stacking order.
We don't actually get 3-D graphics but when two or more elements
overlap, we can control in what order they overlap.
Normally, they are stacked in the order the browser sees the elements.
Later elements are stacked on top of earlier ones.
So, in the same example
we have a second picture that comes on top
of the text.
This shows the relationship between the coordinate axes and the properties that
are used to alter them.
As above, all positions are relative to the origin of the box surrounding the element we are interested in. But we can override this by specifying that we want to use the origin of the browser window, the live area as our origin. What happens if we mix the two of these?. If we put an element that is using position: relative inside an element that is using absolute positioning, the outside element is positioned relative to the origin of the live area of the browser. The interior relatively positioned element is positioned with respect to the upper left corner of the absolutely positioned element.
Going the other way causes a change in behavior. If you put an absolutely positioned element in inside a relative one, the absolute element uses the origin of the relative element instead of the origin of the live area. This seems to me to have the same effect as if the inner element had been declared to be positioned relative.
We can change the visibility of elements on the screen two different ways. The first is the display property. If this is set to none, then it is as if the element was not there. No space is set aside for it, the following elements are placed on the screen just as if it wasn't there.
The other way is the visibility property. If this is set to hidden then the element disappears but the space remains. Setting it to visible makes it reappear. The inherit value means that this element will have the same visible setting as the surrounding or parent element. Visibility is really only useful when combined with JavaScript to change the setting when the user does something.
Clipping is the ability to only show part of an element. The rest acts like its display property is set to none. The properties value is a rectangle specified like this. clip:rect(top right bottom left) The values are position values and notice that they are separated by spaces not commas. This paragraph is repeated on the right with the clipping set. |
|
What to do if the element is larger than the area you have given to show it? An example is if you set the width and height of a block of text and the text doesn't fit. The overflow property has 4 values.