Img Tag is on top fixed header

Question

I have a fixed static header which always visible. When I scroll down the page. The image scrolls over the fixed static header. What property will fixed this issue. CSS: .carouselMainImage img { height: 285px; width:98%; margin: 3px; padding: 6px; } HTML:

Sanjeeb Lenka · Answer

Hi devid Just change the style sheet code of Style.css of header. #header { width:100%; height:50px; background-color:Purple; text-align:center; top:0px; z-index: 100; position:fixed; } i add this line to your Style.css. it will make your div always in the top any problem reply

David Smith · Answer

It maked sense now. W3schools is missing needed information in that area. I wish there was a away to easily see what the current z index values are. That way I can easily set the z index to expected value. Another confusing thing is. I see people setting the z index to 100000 and nit 10. Why setting it so high. Is there ever need to set it to 100000.For Example to fix my issie you told me to set the z index to 100 and another person told me to set it 1.

Sanjeeb Lenka · Answer

check this link for clear understanding http://www.vanseodesign.com/css/css-stack-z-index/

David Smith · Answer

That's exactly what I'm doing. Just not understanding stack order. What are they refering to when they say stack order

Sanjeeb Lenka · Answer

follow the example of w3schools. you can easily understand these things.

David Smith · Answer

I'm getting closer and closer. I guess I need to understand stack order. I see the example. It that order with inside a particular div

Sanjeeb Lenka · Answer

Z-index:100 means it get higher stack order so it will show above all element / in front. you can check live in this example. just check that example by changing the z index http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

David Smith · Answer

So if I set z-index to 100. In what direction the 100 is moving. Give me an example of an normal position. Then move it the z index 100

Sanjeeb Lenka · Answer

Definition and Usage The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute position:relative or position:fixed). http://www.w3schools.com/cssref/pr_pos_z-index.asp

Iftikar Hussain · Answer

set z-index: 1; for #header in your css. http://www.w3schools.com/cssref/pr_pos_z-index.asp Regards Iftikar

David Smith · Answer

What does z-index do?

David Smith · Answer

Hey I modified so you can see the overlay issue. Also the left hand profile circle is doing the samething. Review attachment.

David Smith · Answer

Yep. give me a second.

Iftikar Hussain · Answer

Hi Can you share your complete html and css code? Regards Iftikar