Question

我想将图像放在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;
}

Answer 1

不确定我是否理解正确....

但尝试分配

position:relative;

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

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

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

在顶部元素

z-index:2

“背后”元素

z-index:1;

最高指数位居榜首。

在div中“锁定”图像

1 个答案: