CODEWITHSUNDEEP
htmlcss
Saumil
Saumil

Reputation: 2517

Issue with positioning of elements

I have a page which has a 'fixed' header. Now I want to position the content at 20% below the header, but the 'top' property doesn't seems to work. I tried to use 'left' and 'right' and they seemed to be working fine. Any pointers for this situation? Thanks in advance.

Upvotes: 0

Views: 45

Answers (3)

Hamed mayahian
Hamed mayahian

Reputation: 2323

you should do something like so:

.header{
position:absulote;
top:20%;
height:400px;
width:500px;
}

Upvotes: 0

Richard Peck
Richard Peck

Reputation: 76774

We did something very similar here: http://firststop.herokuapp.com

We just used padding-top: Xpx in our body css, like this:

body {
    padding-top: 60px;
}

This basically makes the entire body of the page have a padding at the top, allowing you to keep the fixed header at the very top

The problem you have is the fixed element acts like a position: absolute element -- it doesn't take normal cascading preferences in the DOM, and thus cannot have any position: relative held against it

Upvotes: 1

Dhanith Suryavansi
Dhanith Suryavansi

Reputation: 29

Take CSS element(margin-top:-Xpx;)in Negative Values for the Content Div.

Upvotes: 0

Related Questions