1
I’m trying to put a button (button
) on top of an image and I’m not getting it. I’ve tried to mess with the property position
(relative
and absolute
) on the image and button, and I still couldn’t.
I wonder if someone could help me?
Follows the code:
#AHEUA {
background-color: rgb(249,189,251);
border: 5px solid;
border-radius: 15px;
border-color: rgb(215,40,231);
margin: 20px;
font: 16px Microsoft New Tai Lue;
font-weight: 700;
}
#botao {
background-color: rgb(195, 88, 246);
border: 1px solid;
border-radius: 5px;
border-color: rgb(195, 88, 246);
padding: 3px 5px;
top: 10px;
position: relative;
}
.modal-dialog {
width: 30%;
min-width: 270px;
}
.modal-body {
height: 10%;
padding: 0px;
}
div#top {
margin-bottom: 20px;
}
div#bot {
}
div#bot > img {
position: relative;
}
div#mid {
width: auto;
height: auto;
padding: 0px 5%;
}
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div id="AHEUA" class="modal-content">
<div class="modal-body">
<form method="">
<div id="top">
<img src="imagens/logo.png" width="100px" class="img-responsive">
</div>
<div id="mid">
<div class="form-group fonte">
<label for="login">LOGIN:</label>
<input type="text" class="form-control borda" id="login" value="" required>
</div>
<div class="form-group fonte">
<label for="senha">SENHA:</label>
<input type="password" class="form-control borda" id="senha" value="" required>
</div>
</div>
<div id="bot">
<img src="http://i67.tinypic.com/24nkaja.png" width="100%">
<button id="botao" type="submit">ENTRAR</button>
</div>
</form>
</div>
</div>
</div>
</div>
Without the z-index and with the #botao {... position: Absolute;...} I can already position the button anywhere, but it loses responsiveness
– Vitor Prado