Guideinfoyou: Html Using Z-Index Css

Hello I know you've got a little busy but I have something to discuss in our tutorial, even though you are not willing for this but you can sit there and listen for a while, this is also in our html but we are going to use by formatting CSS style with (Div) tag, if you don't know the meaning our DIV tags in our html well you can go from here: Html Instruction Formatting Text.

Now I like to share with you something special in our content using Z-Index in our html, Z- index attribute it is about by arrangement in your text and images like you are sending it to front and putting at the back or behind in your images and content text, well it is mean to be you are just putting at the top or putting in their behind, same like that right?

In this tutorial we will use our CSS style using Z-INDEX attribute, and let us working on it our Images below and how we attached them by using Z-INDEX attribute.

Information:

This Z-INDEX attribute are very helpful for us by using arrangement in our text content and images if we are making own website and we can alignment our images or text by using CSS Style by putting their position, adjusting their width and height.

Our images above we have a white background image, Our bugs bunny, (you know that is my favorite looney tune) his partner Lola bunny and our heart images. So let us to combine them and how powerful the Z-index if we use our images and text.

We can say that we are making our own banner or wallpaper. Now let us start of it.

First Sample:

White background image:

Please always check your closing tag if you are using division in your website, and be aware about the position style in if you see my code this code is fit in my website but you can adjust it that one in your notepad or in your website if you use this code.

This is our sample code

<DIV ID="whitebackground" style="position:absolute; overflow:hidden; left:0px; top:1600px; width:600px; height:300px; z-index:0"><img border=0 width="100%" height="100%" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TEx0t0zr6Q-tSbI64se238kBW6JwZl-ndZ5nPK4GGB6tZTV6mNIPMVm5M2YpzboOukYSbBtk30EgcE3VP_vDSuhIi090wT8iFCIciwEkK_cLVdhogKSQrCCqiaLWkUjwrV4nZx7BW88/s200/background+white.jpg">

</div>

In our browser:

By putting front or behind for our images we will use the Z-INDEX "Our integer" 0 - 10 or more, the order of this if the integer smaller that is in behind of our images or text.

Now we are going to attached our another images in our white image background this is will be our code:

<div id="whitebackground" style="height: 300px; left: 0px; overflow: hidden; position: absolute; top: 2300px; width: 600px; z-index: 0;">
<img alt="" border="0" height="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TEx0t0zr6Q-tSbI64se238kBW6JwZl-ndZ5nPK4GGB6tZTV6mNIPMVm5M2YpzboOukYSbBtk30EgcE3VP_vDSuhIi090wT8iFCIciwEkK_cLVdhogKSQrCCqiaLWkUjwrV4nZx7BW88/s200/background+white.jpg" width="100%" />

</div>

<div id="bugsbunny" style="height: 200px;width:200px; left: 0px; overflow: hidden; position: absolute; top: 2300px; width: 600px; z-index: 1;">
<img alt="" border="0" height="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4X6cYPx6D00ex8ucpgkLvvt1Du9-VOsMxoo-zwbjeIwxN2_N8oWDzmjm3wK-gVZwrPTSaKSSpuTHHg2ypaA3GQZqx3ee3xNJzMt2evSNnortYOKVEioQJF3CGJtYpnhI8CK22xz0hJU/s200/bugs.jpg" width="100%" />

</div>

In our browser:

For Attaching our lola bunny and heart images.
Our Sample code below: (You can put alt name if you like to put and check correctly your position integer & if you use the border put 0 - 10 to put line and 0 if you won't put the border line)

<div id="whitebackground" style="height: 300px; left: 0px; overflow: hidden; position: absolute; top: 2900px; width: 600px; z-index: 0;">
<img alt="backgroundwhite" border="0" height="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TEx0t0zr6Q-tSbI64se238kBW6JwZl-ndZ5nPK4GGB6tZTV6mNIPMVm5M2YpzboOukYSbBtk30EgcE3VP_vDSuhIi090wT8iFCIciwEkK_cLVdhogKSQrCCqiaLWkUjwrV4nZx7BW88/s200/background+white.jpg" width="100%" />

</div>

<div id="bugsbunny" style="height: 200px;width:200px; left: 0px; overflow: hidden; position: absolute; top: 2900px; width: 600px; z-index: 1;">
<img alt="bugsbunny" border="0" height="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4X6cYPx6D00ex8ucpgkLvvt1Du9-VOsMxoo-zwbjeIwxN2_N8oWDzmjm3wK-gVZwrPTSaKSSpuTHHg2ypaA3GQZqx3ee3xNJzMt2evSNnortYOKVEioQJF3CGJtYpnhI8CK22xz0hJU/s200/bugs.jpg" width="100%" />

</div>

<div id="lolabunny" style="height: 200px;width:200px; left: 0px; overflow: hidden; position: absolute; top: 2900px; width: 600px; z-index: 2;">
<img alt="lolabunny" border="0" height="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpP9Tp4w5GZsLy8OL3ZTnYrPMgpVLRNkpfMtqQW_tthgvDMKiQFBnCxdFPqHOvkikdJGnWLG4JKn1CkCzHVmG0lbjyoj574OHKWRUfv1Y7AOJECiv5zq4ORD7JmXR9ceu71OcL4yuim4s/s200/bugsbunny+girl.jpg" width="100%" />

</div>

<div id="Heart image" style="height: 200px;width:200px; left: 0px; overflow: hidden; position: absolute; top: 2900px; width: 600px; z-index: 3;">
<img alt="Our heart" border="0" height="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguHvnWL5ywMvKVR_EbeObhNwI6-JgypYGbnv_7Yl9oC1ApARAmw0uNJJd145J1tmVNyO7EoP7bB3iHski85Ze1LwWp_77BpLnmDDfq-cflz6M4gXF7Hs-kDbAR5XVV5rfg6rqU-B4ZUUc/s200/heart.jpg" width="100%" />

</div>

Our browser the complete combination:

Now we are done, if there is something wrong just comment and for our sample if you use this you must just adjusting the position their height/ width and the border line that to fit in your browser and to your website. Good luck :)

Next to Html Audio Tag Attribute
Return to:

Html Tutorial Introduction

Html Structure And Method

Basic Tags and Formatting

Adding links in Html Hyperlinks

Html Instruction Formatting Text

Html Working With Fonts

Html Creating Lists

Html Adding Images To Our Pages Or Website

Html Creating Image Maps
HTML Table Border

HTML Marquee Tag Direction
HTML Marquee Image Attribute