Question

我想做这样的事情：

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

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

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

有人可以帮忙吗？

Fiddle

Answer 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％

的原因

你的css对于#bubble来说就像这样：

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

请参阅我制作的 Fiddle 。

Answer 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供您参考

Answer 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%);   
}

将较高的图像放置在顶部或顶部＆＃34;一个较小的div

3 个答案: