How do I make the button overlay the background image?

Question

How do I make the button overlay the background image?

Navigation

#1 by (1 votes)

1

I'm trying to put a button ( button ) on top of an image and I'm not getting it. I already tried to fiddle with the position ( relative and absolute ) property on the image and button, and still could not.

Can anyone help me?

Follow 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>

html5 css3

asked by anonymous 28.12.2016 / 15:09

1 answer

Server to store images Remove options from input field of datetime-local type

score 1 · Answer 1

Try using the z-index property:

#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;  
}