1

Gostaria de saber como colocar o botão X vermelho em cima da div

como está:

inserir a descrição da imagem aqui

como quero que fique: inserir a descrição da imagem aqui

atualmente a classe do meu botao está assim:

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

ao colocar essa classe:

top: -9%;
right: 2%;

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

acontece isso:

inserir a descrição da imagem aqui

CODIGO CSS:

.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;

}

CODIGO HTML

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

CODIGO JS

$('#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>");
8
  • 1
    Tenta colocar uma largura máxima pra div em px mesmo, se usar as Col do Bootstrap ela vai redimencionar conforme tamanho da tela. Poste o seu código completo HTML / CSS vai ficar melhor para te dar uma resposta precisa.
    – hugocsl
    Commented 2/01/2018 às 13:24
  • coloquei position como absolute e a altura em px e funcionou, agora quero colocar o botao x para fora da div tipo em cima no lado direito sabe como? Commented 2/01/2018 às 13:25
  • Julio Publiquei uma Resposta com o Snippet, executa ele e olha se te atende ou se tem alguma dúvida. Ele não usa classes do Bootstrap pq tem tamanhos fixos. Só usei % para não deixar ele colado na janela do Browser, mas vc pode zerar o Right e Bottom no Css.
    – hugocsl
    Commented 2/01/2018 às 13:38
  • @hugocsl deixei como estava no seu código e meu botão sumiu rsr Vou postar uma foto para entender melhor Commented 2/01/2018 às 13:49
  • como está a estrutura do html?
    – MagicHat
    Commented 2/01/2018 às 14:06

1 Resposta 1

1

Você não conseguirá fazer isso desta forma, porque a div possui overflow ativo (overflow: auto;). Como o botão faz parte da div ele terá que acompanhar o scroll dentro da div porque ele possui position: absolute e ficará escondido quando você fizer scroll ou posicionar ele fora da div.

Para contornar isso, é preciso colocar esse botão fora da div com overflow: auto. A sugestão é transferir o scroll e a altura max-height: 200px para a div com id #btns. Assim o botão ficará fixo onde você quer, porque ele não faz parte do scroll.

Veja:

$('#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>
<div class="col-md-5 col-md-offset-3 janela" id="divDataJson"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .