How to simulate a "min-top" in css

Navigation
0

Does anyone know of a way to simulate a " min-top " in an element? Maybe using JS or Jquery ... I'm using scale() in an object, but the function causes the element to change position. I would like that when I apply scale() the object always stays below that absolute position element ... Could it be? 

<style type="text/css">
    .papel {width: 297mm;height: 210mm; background-color:#CCC;border: 3px solid gray;top: -45%;left: 0%;position: absolute; overflow:hidden;transform:scale(0.5) translate3d(0px,0px,0px); margin-bottom: 80px;transform: translate3d(73px,521px,0px);}
    .mover{position:absolute; cursor:move;}
    #menu{width:100%;height:150px;background-color:blue;}
</style>

<div id="range-input">
        <input type="range" id="zoompapel" min="0.1" max="1" step="0.1" />
</div>

<div id="menu">
    MENU SUPERIOR
</div>
<div class="papel mover" id="papel">
  TESTE
</div>

<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">

$('#zoompapel').change(function(event) {
        var value = $('#zoompapel').val();
           $('#papel').css({
              '-webkit-transform' : 'scale(' + value + ')',
              '-moz-transform'    : 'scale(' + value + ')',
              '-ms-transform'     : 'scale(' + value + ')',
              '-o-transform'      : 'scale(' + value + ')',
              'transform'         : 'scale(' + value + ')'});
            $("#papel").css('position','absolute');

 });
</script>
    
asked by anonymous 21.06.2016 / 21:48

1 answer

0

CSS: 

#div1 {
    min-height:50px;
    background-color: #fee;
    margin-bottom:-50px;
}
#div2 {
    margin-top:50px;
    background-color: #efe
}

link

Result:

When div1 is hidden, div2 has the top property of 50px

When div1 is not hidden:

If div1 has height less than 50px, then div2 is set to 50px.

If div1 is more than 50px tall, div2 is positioned just below div1.

Translation: link

    
21.06.2016 / 22:45
Format an input number Problems with the use of the ui-route AngularJs