html - 即使在调整窗口大小时，如何在图像顶部保持 div(文本框)的相同位置？

Question

我有一张图片，上面有三个文本框。当我调整窗口大小时，我希望框保持完全相同的位置。

boxes small boxes

这是我的 HTML:

<div>
<img class="img-fluid" src="images/create_new_event2.png">

<!-- Shapes -->

<div style="position: absolute; left: 13%; top: 28%;">
<div class="box box-faded box-shadow box-left-arrow">Use a good description.<br /> If a team; <br />start with G07 e.l.</div>
</div>

<div style="position: absolute; right: 15%; top: 29%;">
<div class="box box-faded box-shadow box-top-arrow">Click here if you want to use a previous event as a template.</div>
</div>

<div style="position: absolute; left: 23%; top: 77%;">
<div class="box box-primary box-shadow box-right-arrow">When all fields are completed click here.</div>
</div>

<!-- End of Shapes -->
</div>

这是我的 CSS: /* .box-primary -- 用来描述主要 Action .box-secondary -- 用于显示次要操作 .box-faded -- 用于显示之前的步骤 */

/* Box */
.box {
  width: 300px;
  margin: 50px auto;
  border: 4px solid #000;
  padding: 20px;
  text-align: center;
  font-weight: 900;
  color: #000;
  background-color: #fff;
  font-family: "Open Sans", sans-serif;
  position: relative;  
}

.box.box-shadow.box-primary {
  box-shadow: 0px 0px 10px #52c3bc96;
}

.box.box-shadow.box-faded {
  box-shadow: 0px 0px 10px #e6e6e6bd;
}

.box:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
}

.box:after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
}

/* Box Color variants */
.box.box-faded {
  background-color: #f9f9f9;
  border: 4px solid #e6e6e6;
  color: #bbb;
}

.box.box-primary {
  background-color: #fff;
  border: 4px solid #00bfb6;
  color: #00bfb6;
}


/* >> Box Bottom Arrow */
.box.box-bottom-arrow:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #00bfb6;
  border-bottom: 10px solid transparent;
  right: 50%;
  bottom: -23px;
}

.box.box-bottom-arrow:after {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  border-bottom: 10px solid transparent;
  right: 50%;
  bottom: -18px;
}

/* Box Bottom Arrow Color variants */
.box.box-bottom-arrow.box-faded:before {
  border-top-color: #e6e6e6;
}

.box.box-bottom-arrow.box-faded:after {
  border-top-color: #f6f6f6;
}

.box.box-bottom-arrow.box-primary:before {
  border-top-color: #00bfb6;
}

.box.box-bottom-arrow.box-primary:after {
  border-top-color: #fff;
}


/* >> Box Top Arrow */
.box.box-top-arrow:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid #fff;
  right: 50%;
  top: -23px;
}

.box.box-top-arrow:after {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid #fff;
  right: 50%;
  top: -18px;
}

/* Box Top Arrow Color variants */
.box.box-top-arrow.box-faded:before {
  border-bottom-color: #e6e6e6;
}

.box.box-top-arrow.box-faded:after {
  border-bottom-color: #f6f6f6;
}

.box.box-top-arrow.box-primary:before {
  border-bottom-color: #00bfb6;
}

.box.box-top-arrow.box-primary:after {
  border-bottom-color: #fff;
}

/* >> Box Left Arrow */
.box.box-left-arrow:before {
  border-left: 10px solid transparent;
  border-right: 10px solid #00bfb6;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left: -23px;
  top: 40%;
}

.box.box-left-arrow:after {
  border-left: 10px solid transparent;
  border-right: 10px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left: -17px;
  top: 40%;
}

/* Box Left Arrow Color variants */
.box.box-left-arrow.box-faded:before {
  border-right-color: #e6e6e6;
}

.box.box-left-arrow.box-faded:after {
  border-right-color: #f6f6f6;
}

.box.box-left-arrow.box-primary:before {
  border-right-color: #00bfb6;
}

.box.box-left-arrow.box-primary:after {
  border-right-color: #fff;
}

/* >> Box Right Arrow */
.box.box-right-arrow:before {
  border-left: 10px solid #00bfb6;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  right: -23px;
  top: 40%;
}

.box.box-right-arrow:after {
  border-left: 10px solid #fff;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  right: -17px;
  top: 40%;
}

/* Box Right Arrow Color variants */
.box.box-right-arrow.box-faded:before {
  border-left-color: #e6e6e6;
}

.box.box-right-arrow.box-faded:after {
  border-left-color: #f6f6f6;
}

.box.box-right-arrow.box-primary:before {
  border-left-color: #00bfb6;
}

.box.box-right-arrow.box-primary:after {
  border-left-color: #fff;
}

/* >> Box Top Right Arrow */
.box.box-top-right-arrow:before {
  border-left: 10px solid #00bfb6;
  border-right: 10px solid transparent;
  border-top: 10px solid #00bfb6;
  border-bottom: 10px solid transparent;
  right: -21px;
  top: 6px;
}

.box.box-top-right-arrow:after {
  border-left: 7px solid #fff;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
  border-bottom: 7px solid transparent;
  right: -11px;
  top: 10px;
}

/* Box Top Right Arrow Color variants */
.box.box-top-right-arrow.box-faded:before {
  border-left-color: #e6e6e6;
  border-top-color: #e6e6e6;
}

.box.box-top-right-arrow.box-faded:after {
  border-left-color: #f6f6f6;
  border-top-color: #f6f6f6;
}

.box.box-top-right-arrow.box-primary:before {
  border-left-color: #00bfb6;
  border-top-color: #00bfb6;
}

.box.box-top-right-arrow.box-primary:after {
  border-left-color: #fff;
  border-top-color: #fff;
}

/* >> Box Top Left Arrow */
.box.box-top-left-arrow:before {
  border-left: 10px solid transparent;
  border-right: 10px solid #00bfb6;
  border-top: 10px solid #00bfb6;
  border-bottom: 10px solid transparent;
  left: -21px;
  top: 6px;
}

.box.box-top-left-arrow:after {
  border-left: 7px solid transparent;
  border-right: 7px solid #fff;
  border-top: 7px solid #fff;
  border-bottom: 7px solid transparent;
  left: -11px;
  top: 10px;
}

/* Box Top Left Arrow Color variants */
.box.box-top-left-arrow.box-faded:before {
  border-right-color: #e6e6e6;
  border-top-color: #e6e6e6;
}

.box.box-top-left-arrow.box-faded:after {
  border-right-color: #f6f6f6;
  border-top-color: #f6f6f6;
}

.box.box-top-left-arrow.box-primary:before {
  border-right-color: #00bfb6;
  border-top-color: #00bfb6;
}

.box.box-top-left-arrow.box-primary:after {
  border-right-color: #fff;
  border-top-color: #fff;
}

/* >> Box Bottom Left Arrow */
.box.box-bottom-left-arrow:before {
  border-left: 10px solid #00bfb6;
  border-right: 10px solid transparent;
  border-top: 10px solid #00bfb6;
  border-bottom: 10px solid transparent;
  left: 20px;
  bottom: -23px;
}

.box.box-bottom-left-arrow:after {
  border-left: 10px solid #fff;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  border-bottom: 10px solid transparent;
  left: 24px;
  bottom: -13px;
}

/* Box Bottom Left Arrow Color variants */
.box.box-bottom-left-arrow.box-faded:before {
  border-left-color: #e6e6e6;
  border-top-color: #e6e6e6;
}

.box.box-bottom-left-arrow.box-faded:after {
  border-left-color: #f6f6f6;
  border-top-color: #f6f6f6;
}

.box.box-bottom-left-arrow.box-primary:before {
  border-left-color: #00bfb6;
  border-top-color: #00bfb6;
}

.box.box-bottom-left-arrow.box-primary:after {
  border-left-color: #fff;
  border-top-color: #fff;
}

/* >> Box Bottom Right Arrow */
.box.box-bottom-right-arrow:before {
  border-left: 10px solid transparent;
  border-right: 10px solid #00bfb6;
  border-top: 10px solid #00bfb6;
  border-bottom: 10px solid transparent;
  right: 20px;
  bottom: -23px;
}

.box.box-bottom-right-arrow:after {
  border-left: 10px solid transparent;
  border-right: 10px solid #fff;
  border-top: 10px solid #fff;
  border-bottom: 10px solid transparent;
  right: 24px;
  bottom: -13px;
}

/* Box Bottom Right Arrow Color variants */
.box.box-bottom-right-arrow.box-faded:before {
  border-right-color: #e6e6e6;
  border-top-color: #e6e6e6;
}

.box.box-bottom-right-arrow.box-faded:after {
  border-right-color: #f6f6f6;
  border-top-color: #f6f6f6;
}

.box.box-bottom-right-arrow.box-primary:before {
  border-right-color: #00bfb6;
  border-top-color: #00bfb6;
}

.box.box-bottom-right-arrow.box-primary:after {
  border-right-color: #fff;
  border-top-color: #fff;
}

提前致谢!

Answer 1

你必须使用百分比和 vw 和 vh 而不是像素 所以当你的屏幕缩小时盒子会缩小