-1

我想将图像放置在 div 中的某个位置，但是在调整窗口大小时它会移动到另一个 div 后面。我需要它始终在同一个地方。

HTML：

<div id="gallery">

<div id="gallerytext">
<p>This week's<br />heroes</p>
</div>

<div id="kranz">
<img src="images/kranz.png" alt="kranz" width="310px" />
</div>

<div id="pic1">
<img src="frontgallery/1.jpg" alt="gallery image 1" width="20%" />
</div>

<div id="pic2">
<img src="frontgallery/2.jpg" alt="gallery image 2" width="20%" />
</div>

<div id="pic3">
<img src="frontgallery/3.jpg" alt="gallery image 3" width="20%" />
</div>

<div id="pic4">
<img src="frontgallery/4.jpg" alt="gallery image 4" width="20%" />
</div>

<div id="pic5">
<img src="frontgallery/5.jpg" alt="gallery image 5" width="20%" />
</div>

<div id="pic6">
<img src="frontgallery/6.jpg" alt="gallery image 6" width="25%" />
</div>

<div id="pic7">
<img src="frontgallery/7.jpg" alt="gallery image 7" width="20%" />
</div>

<div id="pic8">
<img src="frontgallery/8.jpg" alt="gallery image 8" width="20%" />
</div>

<div id="pic9">
<img src="frontgallery/9.jpg" alt="gallery image 9" width="20%" />
</div>

<div id="entergal">
<a href="index.html">Enter contest</a>
</div>

</div>

CSS：

#kranz img {
    position:absolute;
    left:42%;
    margin-left:-50px;
    margin-top:-13%;
    width:275px;
}

“图库”中的图像是这样放置的：

#pic2 img {
    display:block;
    float:left;
    margin-left:10%;
    margin-top:10%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;
}
4

1 回答 1

1

不知道我是否理解正确......

但尝试分配

position:relative;

到所有包含绝对定位图像的 div。

如果一个元素有 position:absolute; 它的位置是从下一个相对或绝对定位的父级计算的。

如果定位的元素没有向右重叠，请尝试 z-index：

在顶部元素

z-index:2

“背后”元素

z-index:1;

最高的指数在上面。

于 2013-01-02T15:27:35.310 回答