Problem in aligning with responsiveness



  • I would like to align the x button in the upper right corner of the image vide image and example:

    .teste {
      overflow: hidden;
      display: inline-block;
      margin-bottom: 5px;
      vertical-align: middle;
      text-align: center;
      display: block;
      padding: 4px;
      line-height: 1.428571429;
      background-color: #ffffff;
      border: 1px solid #dddddd;
      border-radius: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
    }
    

    .btn-teste {
    position: relative;
    overflow: hidden;
    }

    .btn-teste input[type=button] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
    }

    .options {
    position: absolute;
    top: 8px;
    right: 82px;
    z-index: 999;
    }

    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <br/><br/>
    <div class="col-xs-6 col-sm-3 col-md-2 col-lg-2 center-block text-center">
    <div class="options">
    <button type="button" class="btn btn-default" title="Remover">
    <i class="fa fa-times"></i>
    </button>
    </div>
    <span class="btn btn-default btn-teste">
    <img class="teste" width="100px" height="150px" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" />
    <div>
    Teste <input type="button" class="file">
    </div>
    </span>
    </div>

    How would you like to stay:

    inserir a descrição da imagem aqui

    The problem here is responsiveness, when increasing or decreasing screen width:

    inserir a descrição da imagem aqui



  • Put the button inside the image box, so the position:absolut will be in relation to this box and not the external box that changes size, and so you always have the same position.

    See below:

    .teste {
      overflow: hidden;
      display: inline-block;
      margin-bottom: 5px;
      vertical-align: middle;
      text-align: center;
      display: block;
      padding: 4px;
      line-height: 1.428571429;
      background-color: #ffffff;
      border: 1px solid #dddddd;
      border-radius: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
    }
    

    .btn-teste {
    position: relative;
    overflow: hidden;
    }

    .btn-teste input[type=button] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
    }

    .options {
    position: absolute;
    top: 0px;
    right: 12px;
    z-index: 999;
    }

    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <br/><br/>
    <div class="col-xs-6 col-sm-3 col-md-2 col-lg-2 center-block text-center">
    <span class="btn btn-default btn-teste">
    <div class="options">
    <button type="button" class="btn btn-default" title="Remover">
    <i class="fa fa-times"></i>
    </button>
    </div>
    <img class="teste" width="100px" height="150px" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" />
    <div>
    Teste <input type="button" class="file">
    </div>
    </span>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2