Question

之前已经提出过这个问题，但每种情况都是独一无二的。我有一个网站的屏幕截图，其中有一个登录框（注册框），旁边有一个粘滞便笺，告诉用户要输入什么信息。

下面的截图：

enter image description here

当用户调整浏览器窗口大小时，注册框重叠了粘滞便笺。登录框也与顶部的徽标重叠。与许多浏览器交叉兼容的解决方案会很好（如果可能的话）。

这是我的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">
  &copy; 2014 Rye High Group.  All rights reserved.</a>
</footer>
</body>
</html>

非常感谢您的帮助，我喜欢这个社区！

谢谢，

Fixnode

Answer 1

试试这个http://jsfiddle.net/ab5KN/

HTML：

<body>
<div class="img">
    <img src="http://rye-high.ca/images/logo.png" />
</div>
<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>
        <li>Capitalize the first letter of your first name and last name (i.e. John Doe)</li>
        <li>Use your email address for the username, otherwise you will not be able to access your account</li>
        <li>Use a secure password that cannot be easily guessed</li>
    </ol>
</div>
<div class="box">
<form class="login" name="register" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <fieldset class="boxBody">
        <label>First Name</label>
        <input type="text" name="firstname" maxlength="50" tabindex="1" placeholder="First Name" required />
        <label>Last Name</label>
        <input type="text" name="lastname" maxlength="50" tabindex="2" placeholder="Last Name" required />
        <label>Username</label>
        <input type="email" name="username" maxlength="50" tabindex="3" placeholder="Email" required />
        <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" />
        </center>
    </footer>
</form>
</div>
<footer id="main">&copy; 2014 Rye High Group. All rights reserved.</a>
</footer>
</body>

CSS：

body {
    background:#eff3f6;
    width: 1000px;
}
.img {
    /*display: block;*/
    width:300px;
    margin: 0 auto;
}
.box {
    width:332px;
    margin: 5px auto;
    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;
    position: block;
    z-index: -1;
    padding-top: 3px;
}
.box.login {
    height:480px;
    width:150px;
    margin: 0 auto;
}
.login fieldset{
    border: 0px;
}
.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;
}
/*Alert Box*/
 .alert {
    background: #fff6bf url(../images/exclamation.png) center no-repeat;
    background-position: 15px 50%;
    text-align: center;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #ffd324;
    border-bottom: 2px solid #ffd324;
}
.info {
    background: #CDFECD url(../images/information.png) center no-repeat;
    background-position: 15px 50%;
    text-align: center;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #90EE90;
    border-bottom: 2px solid #90EE90;
}
.error {
    background: #FFBFBF url(../images/error.png) center no-repeat;
    background-position: 15px 50%;
    text-align: center;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #FF2424;
    border-bottom: 2px solid #FF2424;
}
.box input[type=email], .box input[type=password], .box input[type=text], .txtField, .cjComboBox {
    border:6px solid #F7F9FA;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    -webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    margin:3px 0 4px;
    padding:8px 6px;
    width:270px;
    display:block;
}
.box input[type=email]:focus, .box input[type=password]:focus, .box input[type=text]:focus, .txtField:focus, .cjComboBox:focus {
    border:6px solid #f0f7fc;
    -moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
    -webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
    box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
    color:#333;
}
.cjComboBox {
    width:294px;
}
.cjComboBox.small {
    padding:3px 2px 3px 6px;
    width:100px;
    border-width:3px !important;
}
.txtField.small {
    padding:3px 6px;
    width:200px;
    border-width:3px !important;
}
.rLink {
    padding:0 6px 0 0;
    font-size:11px;
    float:right;
}
.box a {
    color:#999;
}
.box a:hover, .box a:focus {
    text-decoration:underline;
}
.box a:active {
    color:#f84747;
}
.btnLogin {
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, left top, left bottom, from(#badff3), to(#7acbed));
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0, 0, 0, 0.2) 0 1px 0px;
    color:#fff;
    -moz-box-shadow:inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px;
    box-shadow:inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px;
    margin-left:12px;
    padding:7px 21px;
}
.btnLogin:hover, .btnLogin:focus, .btnLogin:active {
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, left top, left bottom, from(#7acbed), to(#badff3));
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active {
    text-shadow:rgba(0, 0, 0, 0.3) 0 -1px 0px;
}
footer#main {
    /*position:fixed;*/
    left:0;
    bottom:10px;
    text-align:center;
    font:normal 11px/16px Arial, Helvetica, sans-serif;
    width:100%;
}
.sticky {
    /* General */
    margin: 0 auto;
    padding: 8px 4px;
    /*width: 370px; */
    max-width: 300px;
    height: auto;
    width: auto\9;
    position: absolute;
    left: 3%;
    top: 250px;
    /* Font */
    font-family:'Nothing You Could Do', cursive;
    font-size: 1em;
    /* 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), color-stop(100%, #f7f381));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fefdca 0%, #f7f381 100%);
    /* Chrome10+,Safari5.1+ */
    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', endColorstr='#f7f381', GradientType=0);
    /* IE6-9 */
    background: linear-gradient(top, #fefdca 0%, #f7f381 100%);
    /* W3C; A catch-all for everything else */
}
/*.sticky ol {
    margin: 12px;
}*/
.sticky p {
    text-align: center;
}

基本上我给身体增加了一个宽度，否则调整窗口的大小总会导致某些东西重叠。我还在图像和表单周围添加了div包装器（不确定是否真的需要，但添加了我认为更好的结构）。拿出一些定位css以及在尝试做事时会造成不必要的痛苦。

Answer 2

添加此CSS规则：

.box
{
    position: relative;
    z-index: -1;
}

Answer 3

这个怎么样？

我删除了您的位置绝对样式，并在粘性和登录控件周围添加了一个包装，并在其上应用了float:left和float: right。

包装器本身与页面对齐。

我编辑了您在上一个答案的评论中发布的小提琴，并在此处进行了更新： http://jsfiddle.net/va45t/1/

#wrapper {
    width: 720px;
    position: relative;
    margin: 0 auto;
}

其他样式更改为.box.login和.sticky

防止CSS中的重叠元素

3 个答案: