problem with position fixed element in iframe

[lostsnow]

when I use the position fixed element in the iframe,
It is not in the correct position
for this example, I want it centered vertically in the parent page

parent page:
http://jsfiddle.net/bducmsnf/

iframe:
http://jsfiddle.net/ooa2ze0o/1/show/

[SchweizerSchoggi]

You're setting the content div to a fixed height of 1000px.
#content {height: 1000px;}

So this is the 'min-height' for your page and the fixed element will always be placed at around 500px height. Right?

[lostsnow]

In the iframe page, the fixed element css:
position:fixed; top: 50%;
THis means the fixed element will placed at 50% of the height of the visible

check in this page:
http://jsfiddle.net/ooa2ze0o/1/show/
It looks all right.

and this page
http://jsfiddle.net/ooa2ze0o/1/
In the result box, also displayed correctly

[SchweizerSchoggi]

Yeah sure, but min-height of your page is always 1000px as long as you define the #content Div to be 1000px high. So if you check the layout in jsfiddle, where the result panel is only let's say 500px height, you'll get scrollbars and the fixed element is nearly out of sight.

[davidjbradshaw]

The CSS you have is fixed relative to the position of the iFrame. If you want to do it relative to the position of the parent page, then you need to either put it in the parent page and z-index over the iFrame, or write a bunch of JS to work it all out.

[small-carbon]

iPad/iPhone position fixed are problems