位置图像到背景

Question

我正在为我的女朋友的网站工作。 但我卡住定位的标志。

这里是我谈论的网站：

http://xntriek-test.s3-website-eu-west-1.amazonaws.com/

我尝试使用Z-指标，但不起作用。我也尝试为身体设置背景图像。 但是，然后我要限制大小的图像。 我正在使用Twitter bootstrap将这件事放在一起。

目前，这是我使用的标志类：

.logo{ 
    position: absolute; 
    top: 25px; 
    left: 25px; 
    height: 45%; 
    width: 30%; 
    z-index: 1; 
} 

在我沿着侧跨度的主要内容定位图像的时刻。 但是因为我使用的是position：绝对的，如果我把它放在一起，这不会有什么不同。

如果任何机构有任何想法我可以如何解决这个问题，也许是一种不同的方法，那么我现在就在做。任何帮助欢迎！

Answer 1

您需要遵循以下修改CSS：

<div class="span6 offset3" style="position: relative; z-index: 1"> 

z-index影响定位的元素，因此只需添加position: relative您感兴趣的跨度。

我会创建一个特殊的类“z-wrap”并修改样式表。

<div class="span6 offset3 z-wrap"> 

在CSS样式表：

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

参考：https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Adding_z-index

注意您可能需要调整取决于你可能有任何的z-index值的z-index的值设置在标志容器中。

Answer 2

首先，你用css扭曲了logo，如果你希望你的图片能够响应，将它放置在一个响应元素中，定位这个绝对值并让图像调整它的大小。

#logoContainer { 
position:absolute; 
top:25px; 
left:25px; 
width:30%; 
z-index:-1; 
}  

img.logo{ 
width:100%; 
height:auto; 
} 

你的HTML应该是这个样子：

<div id="logoContainer"> 
<img src="yoursrc/logo.gif" alt="The Logo" class="logo" /> 
</div> 

把事情处理好自己的身体标记通车后，而不是在一些其他元素。 通过将其放入其他元素中，徽标会继承其z-索引，并且您只能影响它在父级内的z-定位，而不会影响整个页面。

仅在使用它们的“position”属性放置的元素（相对的，绝对的或固定的），可以由“z索引”的影响：

Answer 3

一件事使用z-index属性时要记住。

所以如果你想解决你的问题，要么把你的标志作为背景图片，要么在内容的CSS中使用位置。