How do I make the button overlap the background image?

Asked

Viewed 203 times

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>

1 answer

1

Try to use the property z-index:

#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;
    z-index: 9999;  
}
  • Without the z-index and with the #botao {... position: Absolute;...} I can already position the button anywhere, but it loses responsiveness

Browser other questions tagged

You are not signed in. Login or sign up in order to post.