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/

任何建议都会很有帮助。谢谢!

Answer 1

你可以用这个

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