Why does perspective changes fixed position in CSS?

Question

In the example of http://jsfiddle.net/sqk3k2nq/ , the elements are set to be fixed at the same position.

HTML:

<div>
 <span>This is A</span>
 <div>
 <span>This is B</span>
 <div>
 <span>This is C</span>
 </div>
 </div>
</div>

CSS:

div {
 border: 1px solid red;
 position: fixed;
 top: 20px;
 left: 20px;
}

However, if we add perspective: 1000px; to div, the position will look like relative instead of fixed. See http://jsfiddle.net/sqk3k2nq/1/

Why setting perspective changes it to be relative?
For some reason, I have to set perspective to it and I wish A, B, and C can still be in the same position. Is it possible?

• user3913686: just guessing, but could you use z-index?
• Ovilia: @MrCoder How exactly?
• Robert Harvey: z-index doesn't seem to do much in this context.
• user3913686: @RobertHarvey what happened to your answer? Was working fine for me in chrome?
• Robert Harvey: @MrCoder: It's not a 3D element in the fiddle. I'm not convinced that it works at all. I think Fiddle is just ignoring it.

Answer 1

Why does perspective changes fixed position in CSS?

Because perspective establishes a containing block similar to the way position: relative; does, which is stated in the transform module:

Perspective

The use of this property with any value other than none establishes a stacking context. It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.

Since you're applying a perspective to every div in your example (and top, left properties) each div creates its own containing block and ends up pushed 20px to the right and bottom of the previous div.

• Ovilia: Sounds convincing. But what can I do about it? Even if I set perspective only to the parent, it will look like jsfiddle.net/sqk3k2nq/2 . Is there any chance that A, B, C be at the same position and they are all fixed?
• Adrift: I don't think it's possible (without making significant changes to your CSS).