Is there a css min-top property

No there's nothing like min-top

Instead you can use is

div {
   position: relative;
   top: 50px;
}

And for the example you shown visibility: hidden; will be best suited here, as it will reserve the space of your hidden div


I suspect that this will do the trick for you but I believe it is not a very good practice:

#div1
{
    height:100px;
    outline: 1px solid red;
    margin-bottom:-50px;
}
#div2{
    margin-top:50px;
    outline: 1px solid blue;
}

DEMO: http://jsfiddle.net/pavloschris/tbbvU/

( Just comment/uncomment the display:none to see it work.)


I came up with this solution which utilises the top:0 bottom:0 hack.

We create a container the height of it's relative parent (if any) - we then give this a min-height (eg your min-top)

We then position the actual element absolutely to the bottom on this container.

CSS:

.container {
  position:absolute;
  bottom:0px;
  top: 0;
  min-height: 700px; //Adjust this to your MINIMUM (eg your min-top)
}

.position-me {
  position: absolute;
  bottom: 0;
}

HTML:

<div class="container">
    <div class="position-me">Great!</div>
</div>

Tags:

Css