CODEWITHSUNDEEP
htmlcss
Ovilia
Ovilia

Reputation: 7256

Why does perspective changes fixed position in CSS?

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?

Upvotes: 20

Views: 4137

Answers (1)

Adrift
Adrift

Reputation: 59799

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.

Upvotes: 20

Related Questions