将较高的图像定位在较小的 div 内部或“顶部”答案

【问题标题】：positioning a taller image inside or "on top" of a smaller div将较高的图像定位在较小的 div 内部或“顶部”
【发布时间】：2014-07-11 11:14:22
【问题描述】：

我想做这样的事情：

                                             ----------------   
                                             |              |
----------------------------------------------              ----------------
white background div                         | image on top |
----------------------------------------------              ----------------
                                             |              |
                                             ----------------

我希望图像位于前景中，以便它与顶部和底部的 div 重叠。

我已经尝试过通过百分比值对 top 和 right 进行绝对定位 - 但是，如您所知，当您调整浏览器窗口大小时，所有工作都是徒劳的..

有人可以帮忙吗？

Fiddle

【问题讨论】：

请在此处发布您的代码

标签： html css layout positioning

【解决方案1】：

很容易做到！

只需添加位置：绝对；到你的#content-header。

所以你的 css 看起来像这样：

#content-header {
    height: 4em;
    width: 100%;
    background: #000;
    color: #fff;
    position: absolute;
}

然后更改 #bubble 的 margin-top。

所以不是顶部：15%；占据榜首：-75%；

它是 -75%，因为 -50% 会将 img 的中间带到标题的底部。所以你仍然必须把它放在顶部一点。它是你已经做的长度的一半，这就是为什么它是 75%

#bubble 的 CSS 将是这样的：

#bubble {
    height: 161px;
    position: absolute;
    right: 32%;
    top: -75%;
    width: 165px;
}

查看我制作的Fiddle。

【讨论】：

很遗憾我没有注意到这一点。缩小浏览器窗口时它仍然会移动一点，但正如我所说的那样。无论如何，我计划删除移动版本的图像。非常感谢
好吧，我可以尝试修复它，但如果不是真的必要，我会这样。
当然，如果你改变 div 或图像的高度，这会破坏。
@StenPelzer 在我的情况下没有必要，因为我将在较小的屏幕上隐藏该图像。但如果你能解决这个问题 - 为什么不呢。非常感谢

【解决方案2】：

如果这是你想要的，那就去吧

HTML

<div id="mainstrip"></div>
<div id="image">
<img src="http://i.stack.imgur.com/ExLY1.jpg" width="100%" height="100%"/>
</div>

CSS

#mainstrip{
    position:absolute;
    width:100%;
    height:20%;
    background-color: white;
    border: 2px solid black;
    top:10%;
    left:0;
}
#image{
    position:absolute;
    left:75%;
    top:0;
    width:15%;
    height:40%;
    z-index:100;
}

这里有一个DEMO 供您参考

【讨论】：

【解决方案3】：

此示例不需要条形或图像的高度或宽度的任何固定像素值。

JSfiddle Demo

HTML

<div class="bar">
    <img src="http://lorempixel.com/output/food-q-c-200-200-5.jpg" alt=""/>
</div>

CSS

body {
    background-color: grey;
    margin: 0;
    padding: 0;
}

.bar {
    margin-top: 200px;
    height:150px;
    background-color: white;
    position: relative;
}

.bar img {
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);   
}

【讨论】：