CSS Positioning is not working as expected

问题

Here is my code

CSS

       h2
        {
            position: absolute;
            left: 100px;
            top: 150px;
        }
        h1
        {
            position: fixed;
            top: 300px;
        }

HTML

    <h1>
        Heading for Fixed Position
    <h2>
        This is a heading with an absolute position</h2>
    </h1>

I'm new to CSS so was experimenting with positioning. I read some where

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:

If that is right then This is a heading with an absolute position message must be below the Heading for Fixed Position since h1 is the parent object and h2 being a absolute object must be positioned relative to h1. Please correct if I'm wrong.

Here is the JSFiddle link:

http://jsfiddle.net/KXmgG/

回答1:

I would like to explain you how positioning actually works, there are 4 types

Static (Default)
Relative
Absolute
Fixed

Static position is nothing but a normal flow of the document where elements render on after the another (Excluding floats)

Relative position is something special, which turns out to be a great power when used with position absolute. When you want to use top, left, bottom and right instead of margins, you need to assign position: relative; to that element, after doing so, top, left, right and bottom properties will work.

When you use position: absolute; it gets out of the document flow, so if you have an element called div width class a. Now if you assign position: absolute; to class a, it will get out of the document flow, so when you use top: 0; it will fly away to the top of the document. So in order to restrict it, we wrap a container with position: relative; so that when you use position: absolute;, it will be absolute to that particular element and not the entire document.

Demo 1

Demo 2

Position fixed is entirely different, it is also out of the document flow as same as position: absolute; but the difference is that fixed positioned element cannnot be relative to any element, it has no contact whatsoever with any element, it is always calculated from the top, left, right and bottom of the window and not the element, also a fixed position element will flow as the user scrolls the document.

Demo

Coming to your answer, you are using fixed position and absolute position, both are out of the document flow, so they have no relation what so ever...

You are using top: 300px; for fixed position and top:: 150px; for absolute positioned element, so the fixed element will render below the absolute element, but when you try to scroll, your fixed element will scroll along where as position: absolute; element won't.

Edit as you commented

Go to w3c Validator and validate your document here

回答2:

"An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is :"

Yes but you dont have position:relative declared.

If you want you're parent transform you're html by this :

<div class="parent">
    <h1 class="child">blabla</h1>
    <h2 class="child">blabla</h2>
</div> <!-- end parent -->

<div class="relative">
    <h1>
        Heading for Fixed Position</h1>
    <h2>
        This is a heading with an absolute position</h2>
</div>

CSS :

.relative{
    position:relative;
    }

JSFIDDLE with

position relative / fixed / absolute /]

http://jsfiddle.net/KXmgG/1/

来源：https://stackoverflow.com/questions/17362315/css-positioning-is-not-working-as-expected

标签

html

css

positioning