CODEWITHSUNDEEP
htmlcsspositionabsolute
Mr. Lavalamp
Mr. Lavalamp

Reputation: 1888

Div displaying below div instead of at top of it? (absolute position, margin-top/left 0)

I have a div (#homepage_web_title_webDesign) that, by my understanding, should be in the top left corner of its parent div (#homepage_web_drop_webDesign_wrap), but instead it's displaying just below it. Any help is greatly appreciated! The JSFiddle includes the reset I'm using.

JSFiddle: http://jsfiddle.net/Y7UGp/3/

HTML:

<div id="homepage_web_drop_webDesign_wrap" style="background-color:rgba(0,255,0,.1);">
    <img id="homepage_web_drop_webDesign" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Piratey_transparent_background.svg/383px-Piratey_transparent_background.svg.png" />
    <div id="homepage_web_title_webDesign">Web Design</div>
    <div id="homepage_web_description_webDesign">Creative Web Design should fit your budget and satisfy both you and your customers.</div>
</div>

CSS:

    #homepage_web_drop_webDesign_wrap {
        position:absolute;
        margin-left:0%;
        margin-top:0%;
        height:320px;
        width:260px;
    }
    #homepage_web_drop_webDesign {
        display:inline;
        width:100%;
        height:100%;
    }
    #homepage_web_title_webDesign {
        font-family:ElectrofiedBoldItalic;
        color:rgb(120,91,67);
        position:absolute;
        background-color:purple;
        margin-left:0%;
        margin-top:0%;
        z-index:65;
    }

(I replaced the image with a random one from google, but the dimensions are set with CSS so it doesn't matter obviously.)

Upvotes: 1

Views: 357

Answers (2)

insertusernamehere
insertusernamehere

Reputation: 23580

You set only position: absolute; with no value for top, bottom, left or right. So the element is placed where it appears in the normal flow. When you set one of those values it gets positioned accordingly.

See this new fiddle.

Upvotes: 3

Travis J
Travis J

Reputation: 82267

jsFiddle Demo

margin-left:0 is an offset of the current placement. You should use

left:0;
top:0;

if you want it to be placed over the previous element

Upvotes: 1

Related Questions