Positioning spanbutton in a certain place

Question

Positioning spanbutton in a certain place

Navigation

#1 by (1 votes)

0

I have the following div with these features

HTML CODE

<div id="arrastreImagen">
     <span><i class="fa fa-times btn btn-danger"></i></span>
     <div id="imagenBeer"><img src="~/Content/assets/birras/imperial.png" 
     class="img-thumbnail"></div>
</div>

CSS CODE

#arrastreImagen {
    position: relative;
    margin: 20px auto;
    height: auto;
    text-align: center;
    border: 2px dashed #ccc;
    color: #999;
    padding: 20px;
}

#arrastreImagen #imagenBeer {
    position: relative;
    margin: auto;
    width: 75px;
    height: auto;
}

How can I position the "x" button in the upper right corner and not just stand on top of the image?

html css

asked by Baker1562 25.04.2018 в 20:56

source

1 answer

I do not detect the responsive in mobile first [closed] Display Postgresql Table with Pyqt5

score 1 · Accepted Answer

EDIT

To the span tag you could do this:

#arrastreImagen span {
    position: absolute;
    top: 6px;
    right: 6px;
}

#arrastreImagen {
    position: relative;
    margin: 20px auto;
    height: auto;
    text-align: center;
    border: 2px dashed #ccc;
    color: #999;
    padding: 2px;
}

#arrastreImagen span {
    position: absolute;
    top: 6px;
    right: 6px;
    background-color: red;
    border-radius:3px;
}

#arrastreImagen img{
    width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="arrastreImagen">
     <span><i class="fa fa-times btn btn-danger"></i></span>
     <div id="imagenBeer">
        <img src="https://www.anipedia.net/imagenes/que-comen-los-perros.jpg" class="img-thumbnail">
     </div>
</div>