2
votes

comment placer le bouton dans le coin supérieur droit de l'image

L'image et les boutons sont à l'intérieur d'un div. Comment puis-je faire en sorte que l'image occupe tout le div avec des boutons dans le coin supérieur droit de l'image?

C'est le div qui contient deux boutons et une image. Comment puis-je placer les deux boutons dans le coin supérieur droit de l'image?

J'ai essayé de faire position: relative; haut: 25px mais le bouton sera derrière l'image

<div class="image">
    <a href="{{ url('/image/'.$image->id.'/delete') }}">
        <button type="button" class="btn btn-default delete-image-btn pull-right">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </a>
    <a href="{{ url('/image/'.$image->id.'/edit') }}">
        <button type="button" class="btn btn-default edit-image-btn pull-right">
             <span class="glyphicon glyphicon-pencil"></span>
         </button>
     </a>
     <img src="{{ $image->image }}" class="img img-responsive full-width">
 </div>

html css

0 commentaires

4 Réponses :

3
votes

Bien qu'il existe de nombreuses façons, une solution simple serait de donner aux boutons une propriété z-index.

.delete-image {
z-index :1;
}

0 commentaires

3
votes

Utilisez relatif et absolu comme indiqué ci-dessous pour obtenir l'effet souhaité.

P.S: J'ai utilisé T et P pour désigner les icônes car elles n'étaient pas visibles dans l'extrait de code.

<div class="image">
  <div class="overlay">
    <a href="{{ url('/image/'.$image->id.'/delete') }}">
      <button type="button" class="btn btn-default delete-image-btn pull-right">
          T<span class="glyphicon glyphicon-trash"></span>
      </button>
    </a>
    <a href="{{ url('/image/'.$image->id.'/edit') }}">
      <button type="button" class="btn btn-default edit-image-btn pull-right">
           P<span class="glyphicon glyphicon-pencil"></span>
       </button>
    </a>
  </div>
  <img src="https://picsum.photos/200" class="img img-responsive full-width">
</div>

.image {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  right: 0;
  z-index: 5;
}

1 commentaires

Je ne sais pas quel est votre design. mais bien sûr, cela devrait fonctionner s'il est utilisé correctement

3
votes

Veuillez essayer ce code. Utilisez Position relative et absolue comme ceci:

.image {
  position: relative;
}
.image .delete-image-btn,
.image .edit-image-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.image .edit-image-btn {
  margin-right: 40px;
}

0 commentaires

0
votes

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="image">
  <div class="actions">
    <a href="{{ url('/image/'.$image->id.'/delete') }}">
        <button type="button" class="btn btn-default delete-image-btn pull-right">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </a>
    <a href="{{ url('/image/'.$image->id.'/edit') }}">
        <button type="button" class="btn btn-default edit-image-btn pull-right">
             <span class="glyphicon glyphicon-pencil"></span>
         </button>
     </a>
   </div>
   <img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_960_720.png" class="img img-responsive full-width">
 </div>

.image {
  position: relative;
}

.image .actions {
  right: 1em;
  top: 1em;
  display: block;
  position: absolute;
}

.image .actions a {
  display: inline-block;
}

0 commentaires