[Web designing and Coding]
1
CSS Tutorial Here ! Position relative, etc Sat Jun 18, 2011 7:27 pm
Ezio
Posts
Like
Age
CountryThe art of CSS has almost become synchronized with development
perfection. While every web developers has been adopting the ease and
stability of such language, it's not a simple breeze initially. When
we're talking about CSS Layers, Z-Index, Absolute and Relative
Positioning, CSS beginner often fall into a lot of confusion when they
tries to understand them.
Many CSS beginners may start using relative and absolute positioning
when constructing their web page layout, because they think that is very
easy to position certain element to their desired location just by
changing the top and left value in the CSS.
Well, this might works but often is not a good practice. Reason being
that position absolute will actually takes stuff out of the document
flow, creating many layers above each other and those layers don't see
each other, so nothing will react to each other. This is usually the
primary source of major issues.
Generally, absolute positioning is not advisable for general web page
layout. For me, I only use absolute positioning when I need to position
something that needs to be in a certain position relative to its
parent. For instance, an image that I cannot have it as a background
image which needs to sit right on at the corner of a box that will not
expand, or take example our OXP RSS Feed that I want it to sit above between 2 div tags.
Some other practical use of CSS layer can be:
[You must be registered and logged in to see this image.]
First take a look at the demo on how each layer stack above each other, we are using Relative, Absolute Positioning and Z-index here and not creating many div within it to stack the layers.
Relative Positioning
When you position something relatively, you are modifying its
position from where it would have been if you haven’t changed anything.
It sits on the same layer as the parent's image or content element,
therefore when you specifying top and left
value in the CSS. The start point takes it's pixel count from where the
parent's HTML element left off. Take a look at the example below.
[You must be registered and logged in to see this image.]
Absolute Positioning
Absolute positioning on your web page appear one layer above the HTML
element. It will appears at the exact pixel you specify. If you set the
parent div to position:relative;, the absolute position layer will appear inside the parent div and take the pixel count from within the parent div. Now take a look at the example below.
[You must be registered and logged in to see this image.]
Z-Index
How z-index works is an element with a higher number overlaps an element with a lower number.
Try looking at the image example below, and see how the z-index stack the layer above each other.
[You must be registered and logged in to see this image.]
CSS Layers Example
Alright, let's go through how we can construct each layer and how you
can switch the stacking of each layer and how relative or absolute
positioning affect.
Create Basic CSS Layer 1
Let's create a div tag, and insert some dummy content.
<div id="layer1">
<h2>Layer 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>
By declaring position:relative;, we can hold all the other layers within it.
#layer1 {
background:#707070;
color:#fff;
position:relative;
width:800px;
height:450px;
}
Now Create Layer 2
Basically, the content remains the same, just that the CSS properties
is different and this layer 2 is declared within the Layer 1 div.
<div id="layer1">
<h2>Layer 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<div id="layer2">
<h2>Layer 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>
</div><!-- End of Layer 1-->
By applying position absolute, it bring this layer above the HTML element and because Layer 1 is set to relative, Layer 2 will sit within Layer 1.
#layer2 {
background:#f9ad81;
color:#fff;
position:absolute;
top:40px;
left:50px;
width:400px;
height:400px;
z-index:1;
}
Lastly, Create Layer 3
Is the same as Layer 2, just that the value for top and left in the CSS and the z-index:1; are different.
<div id="layer1">
<h2>Layer 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<div id="layer2">
<h2>Layer 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="layer3">
<h2>Layer 3</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>
</div><!-- End of Layer 1-->
By default, if you never applying z-index:2; for the
Layer 3, it will STILL stack above Layer 2, but in this example I
specify it to prevent any confusion. So when you want to switch Layer 3
around with Layer 2, just change the z-index value smaller than Layer 2.
#layer3 {
background:#6dcff6;
color:#fff;
position:absolute;
top:80px;
left:100px;
width:600px;
height:200px;
z-index:2;
}
You can try changing the z-index value for Layer 2 and Layer 3 and see how each of them stack above or change the positioning between relative and absolute and see how each layer react.
Lastly, for z-index the value can be any value as long as the layer you want to be at the bottom is smaller than the top. It can be just like z-index:999; for Layer 2 and z-index:1000; for Layer 3.
Until now, you can get a rough idea on how each layer can stack above
each other. If you are still unclear about how this work. I will advise
you to download the demo and play around with it, because learning CSS
need some hands-on practice and not just by reading.
perfection. While every web developers has been adopting the ease and
stability of such language, it's not a simple breeze initially. When
we're talking about CSS Layers, Z-Index, Absolute and Relative
Positioning, CSS beginner often fall into a lot of confusion when they
tries to understand them.
Many CSS beginners may start using relative and absolute positioning
when constructing their web page layout, because they think that is very
easy to position certain element to their desired location just by
changing the top and left value in the CSS.
Well, this might works but often is not a good practice. Reason being
that position absolute will actually takes stuff out of the document
flow, creating many layers above each other and those layers don't see
each other, so nothing will react to each other. This is usually the
primary source of major issues.
Generally, absolute positioning is not advisable for general web page
layout. For me, I only use absolute positioning when I need to position
something that needs to be in a certain position relative to its
parent. For instance, an image that I cannot have it as a background
image which needs to sit right on at the corner of a box that will not
expand, or take example our OXP RSS Feed that I want it to sit above between 2 div tags.
Some other practical use of CSS layer can be:
- JavaScript elements flying banners on the page
- Games where you move an object around
- Drop down menu become visible when rollover
[You must be registered and logged in to see this image.]
First take a look at the demo on how each layer stack above each other, we are using Relative, Absolute Positioning and Z-index here and not creating many div within it to stack the layers.
Relative Positioning
When you position something relatively, you are modifying its
position from where it would have been if you haven’t changed anything.
It sits on the same layer as the parent's image or content element,
therefore when you specifying top and left
value in the CSS. The start point takes it's pixel count from where the
parent's HTML element left off. Take a look at the example below.
[You must be registered and logged in to see this image.]
Absolute Positioning
Absolute positioning on your web page appear one layer above the HTML
element. It will appears at the exact pixel you specify. If you set the
parent div to position:relative;, the absolute position layer will appear inside the parent div and take the pixel count from within the parent div. Now take a look at the example below.
[You must be registered and logged in to see this image.]
Z-Index
How z-index works is an element with a higher number overlaps an element with a lower number.
Try looking at the image example below, and see how the z-index stack the layer above each other.
[You must be registered and logged in to see this image.]
CSS Layers Example
Alright, let's go through how we can construct each layer and how you
can switch the stacking of each layer and how relative or absolute
positioning affect.
Create Basic CSS Layer 1
Let's create a div tag, and insert some dummy content.
<div id="layer1">
<h2>Layer 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>
By declaring position:relative;, we can hold all the other layers within it.
#layer1 {
background:#707070;
color:#fff;
position:relative;
width:800px;
height:450px;
}
Now Create Layer 2
Basically, the content remains the same, just that the CSS properties
is different and this layer 2 is declared within the Layer 1 div.
<div id="layer1">
<h2>Layer 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<div id="layer2">
<h2>Layer 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>
</div><!-- End of Layer 1-->
By applying position absolute, it bring this layer above the HTML element and because Layer 1 is set to relative, Layer 2 will sit within Layer 1.
#layer2 {
background:#f9ad81;
color:#fff;
position:absolute;
top:40px;
left:50px;
width:400px;
height:400px;
z-index:1;
}
Lastly, Create Layer 3
Is the same as Layer 2, just that the value for top and left in the CSS and the z-index:1; are different.
<div id="layer1">
<h2>Layer 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<div id="layer2">
<h2>Layer 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="layer3">
<h2>Layer 3</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>
</div><!-- End of Layer 1-->
By default, if you never applying z-index:2; for the
Layer 3, it will STILL stack above Layer 2, but in this example I
specify it to prevent any confusion. So when you want to switch Layer 3
around with Layer 2, just change the z-index value smaller than Layer 2.
#layer3 {
background:#6dcff6;
color:#fff;
position:absolute;
top:80px;
left:100px;
width:600px;
height:200px;
z-index:2;
}
You can try changing the z-index value for Layer 2 and Layer 3 and see how each of them stack above or change the positioning between relative and absolute and see how each layer react.
Lastly, for z-index the value can be any value as long as the layer you want to be at the bottom is smaller than the top. It can be just like z-index:999; for Layer 2 and z-index:1000; for Layer 3.
Until now, you can get a rough idea on how each layer can stack above
each other. If you are still unclear about how this work. I will advise
you to download the demo and play around with it, because learning CSS
need some hands-on practice and not just by reading.
