CSS将图像相互重叠并制作中心栏答案

【问题标题】：CSS positioning images on top of eacother and make center barCSS将图像相互重叠并制作中心栏
【发布时间】：2012-06-29 06:00:17
【问题描述】：

嘿伙计们，我根本无法让它工作。

我有一些使用页边距居中的内容：auto; “诡计”。

在此内容中，我有一张图片。我需要在图像下方制作一个彩条，一直延伸到浏览器的两侧。在右侧，我需要它看起来像是出现在图像上。

我制作了这张图片以尝试以图形方式显示我的意思：image

如您所见，该栏从浏览器的左侧运行到右侧。居中的图像只是放在它的顶部，然后一个图像位于图像的顶部。但我无法让这个工作。有谁愿意试一试吗？

我尝试将条形图相对定位和 z-index 低。这行得通，但酒吧在 IE 7-8-9 中不断跳来跳去。将图像居中也不容易，将较小的图像放在顶部就更难了。如果您调整它的大小，它不会跟随浏览器。这里的问题是用户必须能够上传新图片，所以我不能只制作静态图片。

请帮助我真的迷路了

编辑：

尝试了下面的示例，但是当我在 IE 7-8-9 中运行该站点时，我得到了不同的结果。 link

【问题讨论】：

标签： css image internet-explorer position center

【解决方案1】：

我制作了一个应该在 Chrome 和 IE7-9 中工作的 jsFiddle：http://jsfiddle.net/7gaE9/

HTML

<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>

CSS

#container{
   width: 100%;
    margin: 0 auto;   
    background-color: red;
    text-align: center;
    position: relative;
}
#bar1{
    background-color: blue;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    height: 30px;
    width: 40%;
}
#bar2{
    background-color: blue;
    top: 50%;
    left: 0;
    z-index: 3;
    height: 30px;
    width: 40%;
    position: absolute;
}
img{
    text-align: center;
    z-index: 2;
    position: relative;
}

这里的关键是容器是相对定位的，因此可以实现子元素相对于其父元素的绝对定位。使用 z-index 控制元素的堆叠方式。

【讨论】：

这看起来确实很有希望。虽然当我尝试在我的解决方案中实现代码时，我在不同的浏览器中再次得到不同的结果。不是当我单独尝试你的代码时。
我已经编辑了顶部的描述，有一个链接指向我的尝试方法
直到明天我才能在 IE 中进行测试，但是您应该尝试将栏放在容器内（使其全宽）。现在，您实际上并没有将#bar1 用于任何事情。
Jørgen 你查到了吗？我似乎无法让它工作......不知道为什么这很难获得：S
我认为如果你让容器占据整个页面宽度，你的解决方案会简单得多。这样您就不必将外部条与内部对齐。我想这就是给你带来麻烦的原因。

【解决方案2】：

我用 css 使任何东西居中的方法是：

    .yourclass {
    width:500px;
    position:absolute;
    margin-left:50%;
    left:-250px;
    }

'left' 必须是你的宽度，然后将其设为负值。
到目前为止，我没有遇到任何问题。

【讨论】：

这仅对居中绝对定位的元素有用，仅应在正确的情况下使用。仅将绝对定位用于居中将导致痛苦的世界。
哦，好吧...那你有什么推荐的？
好吧，如果它是一个内联元素，那么 text-align: center on parent 就可以了。如果是块级保证金：0 auto;这不是他想要达到的目标，但如果您阅读了这个问题，Jørgen 的解决方案是有效的。
对不起，我看错了，以后会仔细阅读的。