位置不工作

Question

我创建了一个设计，低于

http://jsfiddle.net/g9TT7/1/

我希望把标志意味着下面的页面的顶部和左侧

<a href="index.html" style="margin-top:10px;position:relative!important;width:200px;display:block;" class="img1"> 
<img src="image/img_2.png" alt="logo" /> 
</a> 

在这里，我想要将商户名称放在页面的中心，徽标将位于页面的左侧。我已在我的徽标中设置绝对位置，但无法工作。 请帮我做到这一点。

Answer 1

我希望你想是这样分配的z-index值：

Demo

添加css浮动：留在您的徽标样式中，并从商业div中删除绝对位置。 您还可以通过播放边距来调整从上到下的位置。

HTML：

<div class="b" style="text-align:center;">  

     <a href="index.html" class="img1"> 
       <img src="image/img_2.png" alt="logo" /> 
     </a> 

     <div class="business_name" > 
          Business 
     </div> 
     <div class="clear"></div> 
</div> 

CSS：

.clear 
{ 
    clear:both; 
} 
.img1{ 
    margin-top:20px; 
    width:200px; 
    display:block; 
    float:left; 
} 
.business_name { 
    width: 78%; 
    font-size: 43px; 
    font-weight: bold; 
    float: left; 
    text-align: center; 
    line-height: 28px; 
    margin-top: 5px; 
} 

.b { 
    font-size: 25px; 
    font-weight: bold; 
    width: 78.5%; 
    text-align: left; 
    height: 50px; 
    margin: 0px; 
    color: rgb(67, 161, 240); 
} 
.img1 { 
    float: left; 
    margin: 2px 0px 0px; 
    width: 20%; 
    text-align: left; 
    border: 0px solid red; 
} 

Answer 2

像这样的东西？ http://jsfiddle.net/ADDTn/

<div class="header"> 
    <a href="#" class="logo"> 
     <img src="img.jpg" /> 
    </a> 
    <h1>Bussiness</h1> 
    <div class="clear"></div> 
</div> 

CSS

.header { 
    width: 100%; 
    height: 100px; 
} 

.logo { 
    display: block; 
    float: left; 
} 

h1 { 
    text-align: center; 
} 

.clear { 
    clear: both; 
} 

Answer 3

<a href="index.html" style="margin-top:10px;position:relative!important;width:200px;display:block; z-index: 1;" class="img1"> 
<img src="image/img_2.png" alt="logo" /> 
</a> 

see this demo