CSS z-index – Overlap html element with different depth

CSS z-index – Overlap html element with different depth. z-index is one of the important css element, which concerns with the layers layout of a web page. Here Layer can be defined as a single thickness of some element covering a surface. If you put one layer above another, then the below layer would be hidden by the above layer. Z-index is also based on this concept. Or you can also compare x,y and z coordinates, where x and y represent plane and z indicates the depth. In other words it determines the stack level of HTML element. But remember, z-index works only when you define the position of that element i.e position as relative, absolute or fixed.

CSS z-index - Overlap html element with different depth
CSS z-index – Overlap html element with different depth

z-index is supported by all major browsers. z-index take positive value. The more the positive value is, means, that element will hide or overlap with the other elements of html. Here is the syntax of declaring z-index in css sytle sheet.

#zvalue{
	z-index : 1;
	position : absolute;
}

where zvalue is an id of one of the html element.
Let us have an example of putting a static html label text over an image. Here is the html code for the same:

CSS z-index – Overlap html element with different depth

<html>
<head>
<title>
css z index
</title>
</head>
<body>

<div id="image" style=" z-index: 1; position: relative;">
	<img src="css z-index.png" alt="z-index" >
</div>

<div id="label" style="margin: -133px 0px 0px 50px; z-index: 1; font-size: 40px; position: fixed;">
	z - index
</div>

</body>
</html>

Output of CSS z-index – Overlap html element with different depth

case 1 : For the above written code –

CSS z-index - Overlap html element with different depth
CSS z-index – Overlap html element with different depth

case 2 : If we will change the style value of id=”label” with z-index:2

CSS z-index - Overlap html element with different depth
CSS z-index – Overlap html element with different depth

Hope this helps to uplift one element over other in CSS with z-index. If you find any problem, then do comment below.

How to add scroll bar in HTML CSS

How to add scroll bar in HTML CSS. While writing a post sometimes we require a line to appear without any break, more than the provided width of the post and sometimes we do not want to exceed the height of the post with all the content appear in the blog. Here we require scroll bar box. You can add horizontal scroll bar in a box or vertical or both horizontal or vertical scroll bar to function in a box with help of overflow element.

How to add scroll bar in html
How to add scroll bar in html

How to add scroll bar in HTML CSS

Adding a  vertical scroll in a box :

Here is the html code :

<div style=”height:100px; width:550px; overflow-y: scroll; padding-bottom:10px; border:3px solid black; “>
<pre>

your text

</pre>
</div>

which will look as :

html code to put scroll box appear in the post :

vertical scroll box

horizontal scroll box

both vertical and horizontal scroll box

 

Adding a horizontal scroll in a box :

Here is the html code :
<div style=”height:200px; width:550px; overflow-x: scroll; padding-bottom:10px; border:3px solid black; “>
<pre>

put your text here

</pre>
</div>

Which will look as :

html code to put scroll box appear in the post :vertical scroll box

horizontal scroll box

both vertical and horizontal scroll box

Adding both horizontal and vertical scroll box :

html code is  :

<div style=”height:200px; width:550px; overflow-x: scroll; overflow-y: scroll padding-bottom:10px; border:3px solid black; “>
<pre>

put your text here

</pre>
</div>

Which will look as :

html code to put scroll box appear in the post :

   vertical scroll box

     horizontal scroll box

       both vertical and horizontal scroll box

You can configure your box with the attributes like, set the font style, font size, color of fonts, background color of the box, border style etc.

For example :

html code to put scroll box appear in the post :

   vertical scroll box

     horizontal scroll box

       both vertical and horizontal scroll box

For the box above html code is :

<div style=”width: 550px; height: 200px; color: 000000; background-color: #DC143C; font-family: arial; font-size: 12px; text-align: left; border: 2px dashed 000000; overflow:scroll; padding: 4px;”>
<pre>

put your text here

</pre>
</div>

If you have any problem related to code of How to add scroll bar in HTML CSS, ask by writing comment on the below space provided. We will work on that. Your valuable suggestion and feedback are always welcomed.