The header isn’t on top of everything because you haven’t put any content inside of it. I see that you have set the maximum: max-height: 40px; but this doesn’t increase the size of the header. Try adding some text to the header.
For the overflow-x, the #img-wrapper img is set to position: absolute. I tried playing around with your code, and the overflow-x worked for me when I removed the position: absolute.
The text slider (I think you mean the #text-wrapper right?) comes up on top of the image slider (#img-wrapper) because you’re setting both to z-index: 1. Since the #text-wrapper is the last element whose z-index changes, it appears on top. (When two elements have the same z-indices, the last z-index element goes on top.)
Ok, the header was a problem of my example, I have now a defined size.
The z-index was only to have the content bellow the header (z-index: 2). I want to have #text-wrapper bellow the #img-wrapper.
I can’t remove position: absolute (//jsfiddle.net/9wPDy/4/) because I want to make a slider from this (that’s why my mix up with the names) and I need to be able to set the x position of each image inside their wrapper and each text inside theirs. I think this is my biggest problem. How to position them inside the container?