|
When you are using Positioning Properties you must first specify whether the object position is static (the default), absolute or relative to the web page. This means that you can then apply the other properties: left, top, width, height, clip, overflow, z-index and visibility.
- position
This property must be used in conjunction with some of the other properties. Absolute positioning offsets elements from the edges of the browser window, while relative positioning places elements into the flow of the document i.e. offsetting them from the previous element in the html code. Therefore you can place objects in relation to each other without having to specify exactly where to draw each one.
- left, top, width, height
These elements are used with each other to give the dimensions of the text object. In these cases we will use the new html tag: <span></span>.
<html>
<style type='text/css'>
<!--
body { background-color: #000000; font-family: comic sans ms }
-->
</style>
<body text=blue>
<p>This is a paragraph</p>
<span style="position: absolute; top: 50px; left: 50px; width: 50px; background-color: red">This is some text</span>
</body>
</html>
- overflow
This tells the browser what to do with any text that will not fit inside the dimensions given. The possible values are: visible (the default), hidden, scroll and auto.
<html>
<style type='text/css'>
<!--
body { background-color: #000000; font-family: comic sans ms }
-->
</style>
<body text=blue>
<p>This is a paragraph</p>
<span style="position: absolute; top: 50px; left: 50px; width: 50px; height: 50px; background-color: red; overflow: hidden">This is some text that will not fit.</span>
</body>
</html>
- visibility
This tells the browser whether the object can be seen or not: inherit, visible or hidden. Even if it is not visible it can still effect the other elements of the page if its position is relative.
<html>
<style type='text/css'>
<!--
body { background-color: #000000; font-family: comic sans ms }
-->
</style>
<body text=blue>
<p>This is a paragraph
<span style="position: relative; top: 50px; left: 50px; width: 50px; height: 50px; background-color: red; visibility: hidden">This is some text.</span> followed by some more text.</p>
</body>
</html>
- clip
This tells the browser whether the object can be seen or not: inherit, visible or hidden. Even if it is not visible it can still effect the other elements of the page if its position is relative.
<html>
<style type='text/css'>
<!--
body { background-color: #000000; font-family: comic sans ms }
-->
</style>
<body text=blue>
<p>This is a paragraph
<span style="position: absolute; top: 100px; left: 100px; width: 150px; height: 150px; background-color: red">This is some text with some more on top.</span>
<span style="position: absolute; top: 100px; left: 100px; width: 150px; height: 150px; color: yellow; background-color: blue; clip: rect(25px 125px 125px 25px);">followed by some more text.</span></p>
</body>
</html>
As you can see the bottom text shows through {even though both tags have the same height, width, top and left tags} because the clip property specifies its size.
- z-index
This tells the browser which object is on top of the other. Normally, the second element would be placed on top of the first element, but we can override this by setting the elements' z-indexes. The lowest value is on the bottom.
<html>
<style type='text/css'>
<!--
body { background-color: #000000; font-family: comic sans ms }
-->
</style>
<body text=blue>
<p>This is a paragraph
<span style="position: absolute; top: 100px; left: 100px; width: 150px; height: 150px; background-color: red; z-index: 2">This is some text.</span>
<span style="position: absolute; top: 100px; left: 100px; width: 150px; height: 150px; color: yellow; background-color: blue; z-index: 1">followed by some more text.</span></p>
</body>
</html>
In the last section we will learn about Classes and ID's.
|
