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);
}