PRIVILEDGED ONES
ROOT ALCHEMY
Part 3 - HTML - Position & Display

In this part continue our journey deeper into this labyrinth, and experiment with the position the display properties of the html element.

Again, we will start with a simplistic test page similar to that of the previous part of this study, where body < html < Peep-Hole (aka Screen):

C
S
S

html
{background: none #a52a2a;
width: 400px; height: 300px;
border: 5px solid #000000;}

body
{background: none #006700;
width: 300px; height: 200px;
margin: 0; padding: 0;}

#test
{background: none #fffacd;}

p
{font-family: sans-serif;
margin-top: 0px; padding: 4px;
font-size: large; font-weight: bold;}

H
T
M
L

<body>

<p>

This is some text....

</p>

</div>

</body>

Position: Absolute

Now, we will add the position, left and top properties to the html element, while setting position property of the html element to absolute, left to 40px and the top to 60px:

ROOT311S		html {position: absolute; left: 40px; top: 60px;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

As expected, the position settings are ignored by Internet Explorer, Mozilla, FireFox & Netscape. However, surprisingly enough, the position settings are accepted by Opera!

Again, for curiosity sake, let's see what will happen if we set left and top properties to a negative value, mostly for the sake of Opera (who else):

ROOT312S		html {position: absolute; left: -40px; top: -60px;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

As expected, the negative position settings are ignored by Internet Explorer, Mozilla, FireFox & Netscape. Well, well, well... The negative position settings are accepted by Opera!

Position: Relative

Let's continue by changing the position property of the html element to relative:

ROOT321S		html {position: relative; left: -40px; top: -60px;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

Again, Opera is the only browser tested that will accept relative positioning! Again, while we are in this deep, we might as well see what will happen if we set left and top properties to negative values, mostly for the sake of Opera:

ROOT322S		html {position: relative; left: -40px; top: -60px;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

As it was the case with absolute positining, the negative relative position settings are accepted by Opera, but ignored by all the other browsers tested.

At this point, regarding the relative positioning - be it in negative or positive values, in Opera, a simple question pops into mind:
Relative to What?

Display: None

Continuing our bizzare jurney, lets remove the position settings, and add display property of the html element with its value set to hidden:

ROOT331S		html {display: none;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

Well, on this one we get a different reactions from the browsers tested:

display: none setting is ignored by Mozilla, Firefox & Netscape.
On the other hand, this setting is accepted by IExplorer & Opera.
However, in Opera, the screen is dark green which is the background color specified for the body element! (Please also note that Opera 7.54 shows a blank screen, very much like IExplorer 6.0 & 7.0.)

Well, again another obvious "Why?" question pops into mind, regarding Opera 9.1, as usual! If the display: none setting is accepted (which obviously the case), then:

Why do we see the body element which is supposed to be inside of the html element, but not its contents?

Display: Inline

Let's push further into this "realm of the absurdy" by changing the setting of the display property of the html element to inline:

ROOT332S		html {display: inline;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

Observations:

This setting of the display property is ignored by Internet Explorer, Mozilla/Firefox & Netscape.
More surprises.... This setting of the display property is accepted by Opera.

What is Next?

Time to end our exploration, and step back to review our findings in the Final Part of this article. www.web-zonez.com/screen/duo/root/root4.html

No, I have not overlooked the overflow property. As mentioned in other parts of this section, that subject is rather complicated and involved, and, it is addressed as a seperate topic: Scrollin' Along! www.web-zonez.com/screen/scroll/index.html

Feed-back & Comments:: Please send any comments, opinions, and even contributions on this subject, using the Feed-Back Form.
Further Reading:: You can review the list of Related Articles, with brief descriptions and links on the Auxiliary Panel,

PRIVILEDGED ONES ROOT ALCHEMY Part 3 - HTML - Position & Display