Question

我正在尝试将我的徽标放在页面上，并将其向下移动到左侧以与部分部分重叠。顶部没有问题，它根据需要重叠到内容区域，但我想要把它移到左边，但是当我这样做时，部分文字被剪掉了......（保龄球应该是徽标，但正如你所见，B的一半已经消失了......）不确定是什么导致了这一点，并且需要帮助来解决它。

页面背景为白色
The Wrapper is Black
我希望部分徽标位于黑色包装区域的左侧白色（如图所示）

目前 Currently

渴望的样子 Desired Look!

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>

Answer 1

这样做：http://jsfiddle.net/yc6Qa/1/

我没有将徽标向左浮动并设置负边距，而是将徽标设置为position: absolute;并使用left: 0;。 CSS / HTML的其余部分未受影响根据您网站的其他部分，此解决方案将很适合您。

Answer 2

更改您的徽标css：

#Logo{
    float: left;
    position: relative;
    top: 90px;
    left: 0px;

}

基本上删除负面左侧。

Css图像定位问题

2 个答案: