Question

我正在为我的女朋友在网站上工作。但是我被困在了徽标上。

这是我正在谈论的网站：

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

我尝试使用z-index但不起作用。我也尝试为身体设置背景图像。但后来我限制了图像的大小。我正在使用Twitter引导程序将这个东西放在一起。

目前这是我用于徽标的课程：

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

此刻，我将图像放在主要内容旁边的跨度中。但是因为我使用的是位置：绝对，如果我把它放在一起，这就没有区别了。

如果有任何机构有任何想法我怎么能解决这个问题，也许我现在正在采取不同的方法。欢迎任何帮助！

Answer 1

首先，如果你想让你的图像在响应元素中做出反应，将它放在一个响应元素上，将这个绝对定位，并让图像调整它的大小。

#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-index，您只能影响它在父级内部的z定位，而不会影响整个页面。

Answer 2

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

只有使用“位置”属性（相对，绝对或固定）放置的元素才会受到“z-index”的影响。

因此，如果您想解决问题，请将徽标作为背景图片，或者在内容的CSS中使用位置。

Answer 3

您需要按照以下内容修改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}

注意您可能需要调整z-index的值，具体取决于您在徽标容器中设置的任何z-index值。