CODEWITHSUNDEEP
htmlcss
Boel
Boel

Reputation: 976

Why is not this element with position absolute and top 0 in the top of its container?

This is my code:

<div id="container">
    <div id="header">
        <img src="https://cdn3.iconfinder.com/data/icons/simplius-pack/512/list1-128.png" id="img-header"></img>
         <h3 id="header-title">this is just a title</h3>

    </div>
</div>

and this is the style:

#container {
    background-color:#e6e6e6;
    width:100%;
    height:400px;
}
#header {
    position:absolute;
    top:0;
    background-color:#ffffff;
    height:10%;
    width:100%;
}
#img-header {
    width:5%;
    height:70%;
}
#header-title {
    width:90%;
    position:absolute;
    top:0;
}

But header-title is positioned below the img.

Since header-title has position:absolute and top:0, I thought it should start where the image starts.

Why is that happening and how to position it the top?

Upvotes: 1

Views: 287

Answers (2)

Ignas Damunskis
Ignas Damunskis

Reputation: 1504

I have made a jsfiddle for you if it's what you need: http://jsfiddle.net/2dvcam8f/12/

I just changed the margin-top of #header-title since h3 has it set by default (you can see it in Element Inspector)

Upvotes: 1

Jon
Jon

Reputation: 437386

The h3 is given a top margin by the user agent's default style sheet; you need to zero that out (or use another element instead).

Upvotes: 4

Related Questions