Element not moving from top

[Pranab]

within a parent element position relative, i include position absolute in an p element but the p element not moving when i include “top” position..look at the code below..

<div class="btnClass">
  <p>ghghg</p>
  </div>

.btnClass{
  position: relative;
}
p{
  position: absolute;
  top: 20%; /*this is not working*/
  left: 15%;
  border: 1px solid red;
  display: block;
}

[Beverleyh]

You’d have to declare a height for the parent otherwise it’s a case of “20% of what?”. The browser needs to calculate 20% of something.

[Pranab]

thanks..it’s working fine..one more question..
what is “calc” in css? how to use that?
like this –

calc(100%-50px);

[GMK Hussain]

use like this

.class{
        height:calc(100%-50px);
}

[Pranab]

what’s this mean by the way..i googled this, but not understand..can anyone explain this to me?or if don’t have time then suggest me a good article about it…i see maximum developer uses this…any advantage for using this?

[Beverleyh]

That syntax isn’t correct – there should be spaces either side of the “-” symbol/operator; height:calc(100% - 50px);

If you Google “uses for calc” you’ll find several good articles on the first page of results.

[Shikkediel]

Also beware of limited support with Android…

http://caniuse.com/#feat=calc

Quite a handy tool otherwise but I only use it after doing a feature test with JS and providing a fallback.

[Author]

Posts