PAB - CSS - Object position the Z factor

Css - Article 4

Programming a Baby series

PAB ( Programming a Baby ).
CSS.
Object Position.
the Z factor.

Hi again (i think)
Are you prepared for a new Css Lesson? (yeahhhh ;) )
Remember one of my last Articles ? Programming.a.baby - (Css) My first Css Doc , in that article i already explained you how to build a Css Class and Css IDs
With those Classes and IDs you were able to give some colors to each element it self and it's border and also background, formatting text...etc

In this Article i will explain you how to give positions to all objects, images, divs, tables...etc inside the Html Body Tag

Before you start learnig how to give positions to a html element, there is something that you need to learn.
The X, the Y and the Z factor (Whats this?!)
Well, if you already study some math you will know at least the X and the Y, they give position to an object relating it with the Top and Left margins of a square or other container.
In Css the terms are:

X = left (this moves object away from the left to right in pixels(px))
Y = Top (this moves object away from the top to down in pixels(px))
Z = z-index (this approaches object to your eyes overlapping the others)

All positions start at ZERO (0)
Take a look on the image 1:

Image 1 - objects with different distances from you eyes

You know how I'm, no bla bla blas, get hands at work now
OK, first we create some simple Html page with, for example a Table and with it an ID name "table1"

Do not forget to go to the Head of the document and LINK to the CSS doc that if you do not have already, you will create one in a few moments, or the Web Browser won't know were to get the style properties for your web page
Take a look on the Sample 1 - Html Code:

Sample 1 - the HTML code

<html>
 
<head>
 <title>My Title</title>
 <link href="design.css" rel="stylesheet" type="text/css" /> 
</head>
 
<body>
 
<table id="table1">
 <tr>
  <td>Table Text1</td>
  <td>Table Text2</td>
 </tr>
</table>
 
</body>
 
</html>

Create the CSS file

Take a notepad text document and rename it to "design.css" and put it in the same folder or place as your Html document

Create the ID you already gave to the table in the Html doc "table1"
Give it a absolute Position, so it can be independent from other elements
Give it a left and top parameters with values in pixels
Give it a z-index parameter with intact value

See the Sample 2.1 - Css code
And see also Image 2 for the Result in a web page

Sample 2.1 - the CSS code (simple)

#table1 {
    position:absolute;
    left:200px;
    top:100px;
    z-index:10;
}

Image 2

Extra Style

Now supose you want to give some extra style, for example to the tables border style
You can do this in two ways:

Go to the Css document and write the new border style propercies inside the Table's ID, check the Sample 2.2
Or
If you need/want to give these properties for other elements you create in future, then you will need to create a Class and write the border style inside it, as you see in the Sample 2.3

Sample 2.2 - CSS code

	
#table1 {
    position:absolute;
    left:200px;
    top:100px;
    z-index:10;
    border:1px red solid;
}

Sample 2.3 - CSS code

	
.mc {
    border:1px red solid;   
}
 
#table1 {
    position:absolute;
    left:200px;
    top:100px;
    z-index:10;
}

Take a look on the image 3 to see you border

Image 3 - result

Element's Border

Note that you are only seing the Table border, not the cells border "td", if you want to see the cells border you can do this in two distint ways

If the "td" was an isolated element you would go the the "td" element TAG inside the HTML document and create a reference to the class "mc"
But since "td" is a "son" of the "table" HTML TAG, we can easy change this in the Css so all the "tds" in one only action, will have all the same property, we do this by creating another id with same name but with a little difference "table1 td", this means that we want to give a style to the "table tds", check the sample 2.4 - Css code

Sample 2.4 - CSS code

.mc {
         
}
 
#table1 {
    position:absolute;
    left:200px;
    top:100px;
    z-index:10;
    font-size:30px;
    border:1px red solid;   
}
 
#table1 td {
    border:1px red solid;
}

You can take a look on the image 4 where you see the table's cells border in red

Image 4 - final result

Finally, since we gave the "TABLE1" ID element the "absolute" position property, you can now create other TABLES with the same properties and play around with the [z-index] of each, also the potitions [top] and [left] to see which of these elements will become closer to your eyes.
This is the factor Z.