我正在尝试将我的 Logo 放在页面上，然后将其向下和向左移动以与部分部分重叠。顶部没有问题，它根据需要与内容区域重叠，但我想将它向左移动，但是当我这样做时，部分文本被截断了。(保龄球应该是 Logo ，但如您所见，B 的一半不见了。)不确定是什么原因造成的，并且需要帮助来修复它。
- 页面背景为白色
- wrapper 是黑色的
- 我希望 Logo 的一部分位于黑色包装区域左侧的白色区域(如图所示)
目前
期望的外观
CSS文件:
body{
margin:0px 0px; padding:0px;
text-align:center;
background-color: white;
color: white;
}
h1{
font-size: 22px;
font-weight: bold;
}
#Wrapper{
width:900px;
margin:0px auto;
min-height:100%;
text-align:left;
padding:0px;
border-width: 0px;
overflow: auto;
}
#Header{
background-color: white;
width: 100%;
min-height: 150px;
}
#ContentWrapper{
text-align: center;
background-color: black;
height: 100%;
}
#Content{
margin-left: 200px;
text-align: left;
}
/* HEADER */
#Logo{
float: left;
position: relative;
top: 90px;
left: -35px;
}
.imgLogo{
}
#HeaderLogin{
float:right;
position: relative;
top: 30px;
left: -30px;
}
#HeaderLoginEmail{
float:left;
margin:0px 10px 10px 0px;
}
#HeaderLoginPassword{
float:left;
margin:0px 10px 10px 0px;
}
#HeaderLoginButton{
float:left;
}
html文件:
<html>
<link rel="stylesheet" type="text/css" media="screen" href="base2.css">
<body>
<div id="Wrapper">
<div id="Header">
<div id="Logo">
<img class="imgLogo" src="images/logo2.png" />
</div>
<div id="HeaderLogin">
<div id="HeaderLoginEmail">
<input class="txtHeaderLogin" placeholder="Email" /> <br />
<label class="lblHeaderLogin">Forgot Email?</label>
</div>
<div id="HeaderLoginPassword">
<input class="txtHeaderLogin" placeholder="Password" /> <br />
<label class="lblHeaderLogin">Forgot Password?</label>
</div>
<div id="HeaderLoginButton">
<a href="#" class="btnHeaderLogin">LOGIN</a>
</div>
</div>
</div>
<div id="ContentWrapper">
<div id="Content">
</div>
</div>
</div>
最佳答案
这样做:http://jsfiddle.net/yc6Qa/1/
我没有将 Logo 向左浮动并设置负边距，而是将 Logo 设置为 position: absolute; 并使用 left: 0;。其余的 CSS/HTML 保持不变。
根据您网站的其余部分，此解决方案将非常适合您。
关于html - Css 图片定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14719596/