0
Этот вопрос задан раньше, однако каждая ситуация уникальна. У меня есть скриншот веб-сайта, на котором есть окно входа в систему (регистрационная коробка) с запиской на стороне, чтобы сообщить пользователям, какую информацию ввести.Предотвращение перекрытия элементов в CSS
Скриншот ниже:
Регистрация ящик над притиркой липкого примечания, когда пользователь изменяет размер его окно браузера. Также окно входа перекрывает логотип сверху. Решение, совместимое со многими браузерами, было бы неплохо (если возможно).
Вот мой CSS:
.box
{
background:#fefefe;
border: 1px solid #C3D4DB;
border-top:1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
-webkit-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
box-shadow:rgba(0,0,0,0.15) 0 0 1px;
color:#444;
font:normal 12px/14px Arial, Helvetica, Sans-serif;
margin:0 auto 30px;
overflow:hidden;
}
.box.login
{
height:480px;
width:332px;
position:absolute;
left:50%;
top:37%;
margin:-130px 0 0 -166px;
}
.boxBody
{
background:#fefefe;
border-top:1px solid #dde0e8;
padding:10px 20px;
}
.box footer
{
background:#eff4f6;
border-top:1px solid #dde0e8;
padding:22px 26px;
overflow:hidden;
height:32px;
}
.box label
{
display:block;
font:14px/22px Arial, Helvetica, Sans-serif;
margin:10px 0 0 6px;
}
.box footer label{
float:left;
margin:4px 0 0;
}
.box footer input[type=checkbox]{
vertical-align:sub;
*vertical-align:middle;
margin-right:10px;
.sticky {
/* General */
margin: 0 auto;
padding: 8px 24px;
/*width: 370px; */
max-width: 370px;
height: auto;
width: auto\9;
position: fixed;
left: 3%;
top: 35%;
/* Font */
font-family: 'Nothing You Could Do', cursive;
font-size: 1.4em;
/* Border */
border:1px #E8Ds47 solid;
/* Shadow */
-moz-box-shadow:0px 0px 6px 1px #333333;
-webkit-box-shadow:0px 0px 6px 1px #333333;
box-shadow:0px 0px 6px 1px #333333;
/* Background */
background: #fefdca; /* Old browsers */
background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), c$
background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* Chrome10+,Safar$
background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColor$
background: linear-gradient(top, #fefdca 0%,#f7f381 100%); /* W3C; A catch-all for ev$
}
.sticky ol {
margin: 12px;
}
.sticky p {
text-align: center;
}
А вот мой HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Secure Customer Login</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0$
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/structure_register.css">
<link href='https://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='styleshe$
<script>document.createElement('footer');</script>
</head>
<center><img src="/images/logo.png"></center>
<body>
<div class="sticky">
<p>
<strong>Please Note</strong>
<br />
</p>
<ol>
<li>Please use your real name (your information is secure and will NOT be shared)$
<li>Capitalize the first letter of your first name and last name (i.e. John Doe)<$
<li>Use your email address for the username, otherwise you will not be able to ac$
<li>Use a secure password that cannot be easily guessed</li>
</ol>
</div>
<form class="box login" name="register" action="<?php echo $_SERVER['PHP_SELF']; ?>" meth$
<fieldset class="boxBody">
<label>First Name</label>
<input type="text" name="firstname" maxlength="50" tabindex="1" placeholder="First Na$
<label>Last Name</label>
<input type="text" name="lastname" maxlength="50" tabindex="2" placeholder="Last Name$
<label>Username</label>
<input type="email" name="username" maxlength="50" tabindex="3" placeholder="Email" r$
<label>Password</label>
<input type="password" placeholder="Password" name="pass1" tabindex="4" />
<label>Repeat Password</label>
<input type="password" placeholder="Repeat Password" name="pass2" tabindex="5" />
</fieldset>
<footer>
<center><input type="submit" name="submit" value="Register" class="btnLogin" /></cent$
</footer>
</form>
<footer id="main">
© 2014 Rye High Group. All rights reserved.</a>
</footer>
</body>
</html>
Ваша помощь очень высоко ценится, я люблю это сообщество!
Спасибо,
Fixnode
Как насчет css для .sticky? – rgtk
не могли бы вы сделать это в скрипке, и мы можем попытаться это исправить? Кроме того, если вы ищете отзывчивость, тогда вам нужно использовать медиа-запросы. Избегайте использования пикселей по мере их исправления и не изменится при изменении размера браузера. –
'