Img Tag is on top fixed header

David Smith

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:

14 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sanjeeb Lenka13y ago
Accepted 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
0
David Smith13y ago
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.
0
Sanjeeb Lenka13y ago
check this link for clear understanding

http://www.vanseodesign.com/css/css-stack-z-index/
0
David Smith13y ago
That's exactly what I'm doing. Just not understanding stack order. What are they refering to when they say stack order
0
Sanjeeb Lenka13y ago
follow the example of w3schools. you can easily understand these things.
0
David Smith13y ago
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
0
Sanjeeb Lenka13y ago
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
0
David Smith13y ago
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
0
Sanjeeb Lenka13y ago
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
0
Iftikar Hussain13y ago
set z-index: 1; for #header in your css.

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Regards,
Iftikar
0
David Smith13y ago
What does z-index do?
0
David Smith13y ago
Hey I modified so you can see the overlay issue. Also the left hand profile circle is doing the samething. Review attachment.
0
David Smith13y ago
Yep. give me a second.
0
Iftikar Hussain13y ago
Hi,
Can you share your complete html and css code?

Regards,
Iftikar
0

Img Tag is on top fixed header

Definition and Usage