How to Set Max Height and Exact Position of a Button on a DIV on Page

Navigation
1
  

I would like to know how to put the red X button on top of the div

How are you?

HowIwantyoutostay:

Currentlytheclassofmybuttonislikethis:

position:absolute;top:9%;right:2%;

Whenputtingthisclass:

top:-9%;right:2%;width:24px;height:24px;background-color:#f00;position:absolute;z-index:9;border-radius:10px;

thishappens:

CSSCODE:

.janela{margin-top:1000px;margin-left:40%;position:absolute;max-height:200px;min-width:40%;z-index:1;overflow-y:auto;background-color:rgba(190,190,190,0.6);}.btnclose{/*position:absolute;*/top:-9%;right:2%;width:24px;height:24px;background-color:#f00;position:absolute;z-index:2;border-radius:10px;}

HTMLCODE

<divclass="col-md-5 col-md-offset-3 janela" id="divDataJson"></div>

JS CODE 

$('#divDataJson').append(
"<div class'row' id='btns"+i+"' style='margin-top: 10px; margin-bottom: 15px;' >" +
    "<div class='col-md-2'>"+
        "<button type='button' class='btn btn-primary thbtn' onclick='add(\""+retorno[i][0]+"\")'><b><span class='glyphicon glyphicon-plus-sign'></span></b></button>"+
        //"<button type='button' onclick='esconder(\"camada\","+numero_de_camadas+","+i+",\"btns"+i+"\",\"null\")' class='btn btn-success thbtn' ><b><span class='glyphicon glyphicon-chevron-down'></span></button></b>"+
    "</div>"+
    "<div class='col-md-10'style='text-align:left;' onclick='esconder(\"camada\","+numero_de_camadas+","+i+",\"btns"+i+"\",\"null\")'>"+
        "<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+
            "<img src='img/sistema3.png' width='26' height='26' />" +
            "<b> "+retorno[i][0]+" </b>"+
        "</p>"+
    "</div>"+
"</div>");
    
asked by anonymous 02.01.2018 / 14:18

1 answer

1

You will not be able to do this this way because div has overflow active ( overflow: auto; ). Since the button is part of div it will have to track the scroll within div because it has position: absolute and will be hidden when you scroll or position it outside div .

To get around this, you have to put this button out of div with overflow: auto . The suggestion is to transfer the scroll and height max-height: 200px to div with id #btns . So the button will be fixed where you want, because it is not part of the scroll.

See: 

$('#divDataJson').append("<button type='button' class='btn btn-danger btnclose' title='fechar' onclick='esconde_div(\"divDataJson\")'>X</button>")

$('#divDataJson').append(
"<div class'row' id='btns'>" +
    "<div class='col-md-2'>"+
        "<button type='button' class='btn btn-primary thbtn' onclick='add(\"dvd\")'><b><span class='glyphicon glyphicon-plus-sign'></span></b></button>"+
        //"<button type='button' onclick='esconder(\"camada\","+numero_de_camadas+","+i+",\"btns"+i+"\",\"null\")' class='btn btn-success thbtn' ><b><span class='glyphicon glyphicon-chevron-down'></span></button></b>"+
    "</div>"+
    "<div class='col-md-10'style='text-align:left;' onclick='esconder(\"camada\",\"dvd\",\"dvd\",\"btns\",\"null\")'>"+
        "<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+
            "<img src='img/sistema3.png' width='26' height='26' />" +
            "<b> dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br>dvd<br><br> </b>"+
        "</p>"+
    "</div>"+
"</div>");
.janela{


  margin-top: 1000px;
  margin-left: 40%;
  position:absolute; 
  max-height: 200px;
  min-width: 40%;
  z-index: 1;
  xoverflow-y: auto;
  background-color: rgba(190,190,190, 0.6);
  }

  .btnclose{

/*position: absolute;*/
top: -9%;
right: 2%;

width: 24px;
height: 24px;
background-color: #f00;
position: absolute;
z-index: 2;
border-radius: 10px;
}

#btns{
   overflow: auto;
   background: red;
   max-height: 200px;
   padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-md-5 col-md-offset-3 janela" id="divDataJson"></div>
    
02.01.2018 / 15:39
Doubt about autoload php Is there any way to get what the user is listening to?