Div над холстом

-4

Это моя страница Войти Я хочу разместить свой логин-окно на холст теперь первое шоу холста, а затем показать DIV я хочу войти в ящике DIV над этим полотномDiv над холстом

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> </head> <body class="login-page"> <canvas id="header-canvas" style="background-color:#999"> <header id="header" > </header> </canvas> <div class="login-box" > <div class="login-box-body"> <form action="" method="post" name="login"> <div class="form-group has-feedback "> <input type="text" class="form-control" placeholder="Username/Email" required name="login_name"/> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" placeholder="Password" name="login_pass"required/> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-4"> <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button> </div> </div> </form> </div> </div> <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="plugins/magnificpopup/plugins.js"></script> </body> </html>

источник

2016-02-09 Eldhose Elias

Трудно ответить без jsfiddle, ссылки или какого-либо кода для просмотра. –

Просьба указать код, который будет легче идентифицировать проблему –

Это просто. Но сначала вы должны предоставить свой код. – ketan

следующим образом вы можете положить положил над холстом с помощью position:absolute;

#header-canvas { 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 

 
.login-box { 
 
    background: #fff none repeat scroll 0 0; 
 
    left: 50%; 
 
    padding: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="header-canvas" style="background-color:#999"> <header id="header" > </header> </canvas> 
 

 
<div class="login-box" > <div class="login-box-body"> 
 
<form action="" method="post" name="login"> 
 
    <div class="form-group has-feedback "> 
 
    <input type="text" class="form-control" placeholder="Username/Email" required name="login_name"/> 
 
    <span class="glyphicon glyphicon-envelope form-control-feedback"></span> 
 
</div> 
 
    <div class="form-group has-feedback"> 
 
    <input type="password" class="form-control" placeholder="Password" name="login_pass"required/> 
 
    <span class="glyphicon glyphicon-lock form-control-feedback"></span> 
 
    </div> 
 
    <div class="row"> <div class="col-xs-4"> 
 
    <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button> </div> 
 
</div> 
 
</form> 
 
</div> 
 
</div>

Working Fiddle

источник

2016-02-09 08:11:26 ketan

Div над холстом

ответ

Смежные вопросы