Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mathieu Delporte
Mathieu Delporte
8,097 Points

Ipad fixed position issue

So I'm building a website where I have a fixed div about 700px high with a background image. Below that is an relative div with a top: 700px which makes it go right below the fixed one. When you scroll the relative div goes over the fixed one.

The problem I'm experiencing is that on Ipad and sometimes on Iphone the relative div scrolls behind the fixed one, until I let go of the screen, then the relative div pops to the front.

Has anyone experienced this before and if so could you help me? It's only on Ipad and Iphone, every other browser is working so far.

Caroline Hagan
Caroline Hagan
12,587 Points
Caroline Hagan
Caroline Hagan
12,587 Points

Mathieu Delporte can you provide the link to the page so we can take a look?

Michael Wheelus
Michael Wheelus
8,783 Points
Michael Wheelus
Michael Wheelus
8,783 Points

You should probably set a z-index for both div tags. A z-index will be set by adding a number value which will place the div tags above or below each other on a 3d plane. If you give your your fixed div tag a z-index of 1 and your relative div tag a z-index of 1000, this should give you your desired outcome. The higher the number the will place that object above a lower number z-index.

Michael Wheelus
Michael Wheelus
8,783 Points
Michael Wheelus
Michael Wheelus
8,783 Points

Also, I would complete this effect a different way. Give the body tag of your HTML a background image. Then, keep your relative div tag the same.

body { background: url('../images/background.jpg') } div { margin-top: 700px; }