2Blogger: css

Dear friends this is the common problem everyone facing while designing their website with beautiful and attractive javascript animation. you will see the problem when you preview your web design in your browser. your css drop down menu displays behind javascript animation. This is very simple problem if your css drop down menu goes behind the javascript animation you don't have to worry at all. i am going to show you how it is possible to bring your css drop down menu infront of javascript animation.

Before i give you solution you must have knowledge of z index:

Understanding z index: z index is a CSS property that sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order. i hope now you understand what is z index.

now here is the solution to display you css drop down menu infront of javascript animation.

1. you just have to add the z-index code and your drop down menu will display infront of your animation.

2. you may get confused where to put z index code and how to put z index code to show your drop down menu in front of your animtion.

3. don't worry its very simple. i am going to show you step by step.

4. you can see above in the image there is css drop down menu displaying behind the javascript animation. i am showing you this image because i also face the same problem while designing my website. i hope it will help you better to understand.

5.now i am showing you the code of above css drop down menu image.

you can see above highlighted three menu is not displaying infront of animation. now i am going to show you in next step to bring your menu in front of animation.

6. you just need to add this code style="z-index:10000". and your probelm is solved. u can change the value of z index according to your need. again you may confuse where to put this z-index code. dont worry i will show you in next step

7. you have to add this code inside <ul> tag like this <ul style="z-index:10000">. again you may get confused because you may see so many <ul> tag in your web design code. To find the right <ul> tag may be challenge for you. dont worry its simple. you have to add your z index code exactly where it is going behind the javascript animation.

8. i will show you image also look below. there you can see with highlighted with blue color. now i hope you will understand where to put exactly.

Now your animation should look like below image. there you can see you drop down menu is displaying infront of animation.

10. i hope this will help you to solve the problem

Thank you.

Hello 2blogger readers, you must have good knowledge of z-index in CSS when positioning elements. Below i am going to explain you in detail what z-index is in css.

# What is z-index in css?

=> The z-index property specifies the stack order of an element. In other words, when there is an overlap between two elements, the z-index value determines which one shows up on top. The element with a larger z-index value will appear on top and lower will goes behind of it.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)

For example
I define two boxes with the following css code to help you better understand. You can copy the code and use it yourselves so that you can easily understand the difference. I have defined two classes in css box1 and box2. If you change the z-index value and preview it in the browser you will understand better what is the role of z-index in css.

.box1 {
z-index: 1;
position:absolute;
width:150px;
height:150px;
top:20px;
left:20px;
border: 5px solid #FF0000;
background-color: #FF9900;
}

.box2 {
z-index: 2;
position: absolute;
width:150px;
height:150px;
top:100px;
left:100px;
border: 5px solid #FF0000;
background-color: #3399CC
}
</style>
</head>

<body>
<div class="box1">box 1 </div>
<div class="box2">box 2 </div>

</body>
</html>

I hope you understand the z-index in css clearly.Iif you have any confusion then please comment below. I will try to answer your question.

Have a good time!