Javascript 制作覆盖层<；部门>；仅使用HTML-CSS调整缩放大小后保持在原位的

我在网站上的工作，将有图像库。设计师的想法是使切换照片的按钮位于照片上方一点

像这样

---

目前，我已经为这个做了一个javascript解决方案——它获取照片的位置，并对按钮div应用绝对定位。有一些缺点-它在Opera和IE中工作不稳定。此外，我还必须制作一些肮脏的haxx，使其在缩放后保持原位。我想知道是否有更好的方法来实现这一点，最好不要使用javascript。

如果我理解正确，您正在尝试将这些箭头按钮相对于图像垂直居中。这很容易用CSS（不需要javascript）实现。这是一个例子

---

基本思想是使用几个div加上一些绝对/相对定位。有一个外部div将整个内容的顶部放在父元素的中心，然后是一个内部div将内容放在中心，而不是元素的顶部。

如果我理解正确的话，您正在尝试将这些箭头按钮相对于图像垂直居中。这很容易用CSS（不需要javascript）实现。这是一个例子

---

基本思想是使用几个div加上一些绝对/相对定位。有一个外部div将整个图像的顶部放置到父元素的中心，然后是一个内部div将内容拉起，使内容居中，而不是元素的顶部。

一种流行的技术是将整个图像分割为两个巨大的（大部分透明）链接。照片的左半部分将带您进入上一张图像，右半部分将带您进入下一张图像

当然，你可以适当地定位按钮的图像，它们会四处移动，但我认为你发现的问题是，当按钮移动时，你必须不断地移动鼠标来浏览大量的图像。。。。好的，有了这个想法，你只需要把鼠标放在中间附近，它应该保持在照片上方（因此是一个方向）

例如：

---

将鼠标移到图像上，您将看到它在整个过程中处于活动状态。我敢肯定，这与您的实现不太一样，但这一概念适用。

一种流行的技术是将整个图像分割为两个巨大的（大部分是透明的）链接。照片的左半部分将带您进入上一张图像，右半部分将带您进入下一张图像

当然，你可以适当地定位按钮的图像，它们会四处移动，但我认为你发现的问题是，当按钮移动时，你必须不断地移动鼠标来浏览大量的图像。。。。好的，有了这个想法，你只需要把鼠标放在中间附近，它应该保持在照片上方（因此是一个方向）

例如：

将鼠标移到图像上，您将看到它在整个过程中处于活动状态。我敢肯定，与您的实现不太一样，但这个概念适用。

您的意思是喜欢？（荷兰网站，见顶部中柱的照片浏览器）

浏览器缩放在firefox和safari这样的浏览器中效果很好，因为它们可以缩放所有内容并重新更正像素值。要使缩放在ie（6）中工作，您需要在em中设置所有样式。但无论如何，浏览器缩放像素数据都很糟糕

只要容器元素是相对定位的，按钮（左0和右0）的绝对定位就不是问题。

您的意思是“喜欢”？（荷兰网站，见顶部中柱的照片浏览器）

浏览器缩放在firefox和safari这样的浏览器中效果很好，因为它们可以缩放所有内容并重新更正像素值。要使缩放在ie（6）中工作，您需要在em中设置所有样式。但无论如何，浏览器缩放像素数据都很糟糕

---

只要容器元素是相对定位的，按钮（左0和右0）的绝对定位就不是问题。

这不是我的确切意思）抱歉，我把您弄糊涂了。我的问题是-我如何定位这两个按钮，使它们保持在照片上方，就像在我的示例中一样，而不使用JS。绝对位置不起作用，因为当我在浏览器中放大/缩小时它会移动。这不是我的确切意思）对不起，我把你们弄糊涂了。我的问题是-我如何定位这两个按钮，使它们保持在照片上方，就像在我的示例中一样，而不使用JS。绝对位置不起作用，因为当我在浏览器中放大/缩小时它会移动。我也这样做过：）。当您位于图像的正确一侧时，按钮闪烁黄色。我的问题是如何正确定位按钮）我也做过：）。当您位于图像的正确一侧时，按钮闪烁黄色。我的问题是如何正确定位按钮）你能回答吗？你能回答吗？