html - Div定位取决于图像大小？

Question

在我的网页上，当您将鼠标悬停在容器 div 上时，我有一个带有图像的容器 div 和一个显示在容器右侧的 div。容器具有相对位置，而窗口 div 具有绝对位置（由于另一个原因，窗口 div 必须留在容器 div 内）。我的问题是，如果图像很小，窗口 div 将位于容器/图像的后面，而不是位于它的右侧。

.container {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	flex-direction: row;
	max-width: 45%;
	float: left;
}

#img1 {
	width: 100%;
	height: auto;
	margin: 3% 0 0 0 !important;
}

.window {
	width: 300px;
	height: 300px;
	top: 0%;
	left: 80%;
	margin-left: -200px !important;
	z-index: 1;
}

.container:hover .window {
	left: 150%;
	top: -5%;
}

<div class="container">
	<img id="img1" src="whatever" />
	<div class="window"></div>
</div>

CSS中有没有一种方法可以使窗口div保持在容器右侧约5像素左右，无论图像大小如何？JSFiddle 工作不正常，但我正在寻找这样的定位：https ://www.jqueryscript.net/demo/Simple-Image-Hover-Zoom-Plugin-With-jQuery-spzoom/

任何建议都会非常有帮助。谢谢！

标签： htmlcssposition

Answer 1

你可以用这个

.window {
    right: -10px;
    position: absolute;
    transform: translate(100%,0);
}