Html 防止 CSS 中的元素重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21506195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 00:47:41 来源:igfitidea点击:
Prevent overlapping elements in CSS
提问by fixnode
This question has been asked before, however each situation is unique. I have a screenshot of a website that has a login box (registration box) with a sticky note on the side to tell the users what information to enter.
之前已经问过这个问题，但是每种情况都是独一无二的。我有一个网站的屏幕截图，该网站有一个登录框（注册框），侧面有一个便利贴，告诉用户要输入哪些信息。
Screenshot below:
截图如下：
The registration box is over lapping the sticky note when the user resizes his browser window. Also the login box is overlapping the logo on the top. A solution that is cross compatible with many browsers would be nice (if possible).
当用户调整浏览器窗口的大小时，注册框与便签重叠。此外，登录框与顶部的徽标重叠。与许多浏览器交叉兼容的解决方案会很好（如果可能的话）。
Here is my 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;
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;
}
And here is my HTML:
这是我的 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>
Your help is very much appreciated, I love this community!
非常感谢您的帮助，我爱这个社区！
Thanks,
谢谢，
Fixnode
固定节点
回答by Spdermn02
Try this http://jsfiddle.net/ab5KN/
试试这个http://jsfiddle.net/ab5KN/
HTML:
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">© 2014 Rye High Group. All rights reserved.</a>
</footer>
</body>
CSS:
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;
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;
}
Basically I added a width to the body, or else adjusting the size of the window will always cause something to overlap. I also added in div wrappers around the image and form (not sure if really needed but added for what I consider better structure). Took out some of the positioning css as well as it causes undue pain when trying to do things.
基本上我给 body 添加了一个宽度，否则调整窗口的大小总是会导致某些东西重叠。我还在图像和表单周围添加了 div 包装器（不确定是否真的需要，但添加了我认为更好的结构）。去掉了一些定位 css 以及它在尝试做事情时会引起不必要的痛苦。
回答by rgtk
Add this CSS rule:
添加此 CSS 规则：
.box
{
position: relative;
z-index: -1;
}
回答by Joel
How about this?
这个怎么样？
I removed your position absolute styles and added a wrapper around the sticky and the login controls and applied float:leftand float: righton them.
我删除了您的位置绝对样式，并在粘性和登录控件周围添加了一个包装器，float:left并float: right在它们上应用和应用。
The wrapper itself is center aligned to the page.
包装器本身与页面居中对齐。
I edited the fiddle you posted in the comment on a previous answer and updated it here: http://jsfiddle.net/va45t/1/
我编辑了您在上一个答案的评论中发布的小提琴并在此处更新：http: //jsfiddle.net/va45t/1/
#wrapper {
width: 720px;
position: relative;
margin: 0 auto;
}
The other styles changed were .box.loginand .sticky
改变的其他样式是.box.login和.sticky
