Question

I have a div, below is its css

#sign_up_box_1 {
    width: 400px;
    height: 280px;
    position:relative;
    top: -290px;
}

It works fine in safari, but does not work in Firefox.

Firefox seems to ignore the top:-290px.

can anyone help me?

below is the JSFiddle code:

HTML

<div id="container">
    <div id="test"></div>
</div>

CSS

#container {
    -moz-box-align: center;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
    display: -moz-box;
    position: relative;
    width: 200px;
    z-index: 0;
}

#test {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    top: -50px;
}

it works well in safari and chrome..but failed in firefox

I find the problem is at “box”…when I remove box property, firefox works fine…

Does anyone has some idea?

Answer 1

Relative positioning of children of XUL boxes is not supported in Gecko. It really doesn’t make any sense to do that sort of thing in the XUL box model.

As long as you stick to using standard CSS, of course, relative positioning will work as expected.