如何用CSS和HTML在屏幕指定位置放置固定宽高的div元素？

当然可以实现这种精准的元素定位！针对你说的把文本框+按钮的div放到时钟面板一侧的需求，用CSS的绝对定位配合父元素的相对定位是最直接高效的方案，下面给你详细讲实现步骤和代码示例：

核心思路 #

我们需要先给包含时钟的父容器设置position: relative，这样后续要定位的div就可以以这个父容器为基准，通过top/left等属性精准控制位置，而不是相对于整个页面偏移。

代码实现 #

HTML结构 #

<!-- 父容器：包裹时钟（背景图或img标签）和目标控制面板 -->
<div class="clock-wrapper">
  <!-- 要精准定位的文本框+按钮容器 -->
  <div class="control-box">
    <input type="text" placeholder="请输入内容" />
    <button>提交</button>
  </div>
</div>

CSS样式 #

.clock-wrapper {
  /* 关键：父容器设为相对定位，作为子元素定位的参考基准 */
  position: relative;
  /* 设置和时钟图片一致的宽高，保证定位坐标准确 */
  width: 800px; /* 替换成你时钟图片的实际宽度 */
  height: 600px; /* 替换成你时钟图片的实际高度 */
  /* 将时钟图片设为背景（如果你的时钟是<img>标签，直接放在这个容器里即可） */
  background-image: url('你的时钟图片本地路径');
  background-size: cover;
  background-position: center;
}

.control-box {
  /* 固定宽高，根据你的设计需求调整 */
  width: 220px;
  height: 90px;
  /* 绝对定位：基于父容器的位置进行偏移 */
  position: absolute;
  /* 核心定位属性：根据你的设计图调整数值，精准对准目标位置 */
  top: 160px; /* 距离父容器顶部的像素距离 */
  left: 60px; /* 距离父容器左侧的像素距离 */
  /* 可选：添加样式让面板更美观 */
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px;
  border-radius: 6px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.control-box input {
  flex: 1;
  padding: 7px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
}

.control-box button {
  padding: 7px 15px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.control-box button:hover {
  background-color: #1d4ed8;
}

关键细节说明 #

1. 父容器的相对定位：这是绝对定位生效的前提，如果父容器不设position: relative，子元素的绝对定位会相对于整个文档（body），就无法精准对准时钟的位置了。
2. 定位数值的获取：你可以用截图工具（比如系统自带的截图、Snipaste等）测量目标位置距离时钟顶部和左侧的像素值，直接填到top和left里，就能实现精准对齐。
3. 时钟的两种实现方式：如果你的时钟是<img>标签，只需要把它放到.clock-wrapper容器里，不需要背景图样式，父容器的宽高可以不用手动设置（或者设为max-width: 100%），但要确保父容器还是position: relative。

可选方案：CSS Grid定位 #

如果你的页面布局本身用了Grid，也可以通过Grid来实现精准定位，比如给父容器设置display: grid，然后用place-self: start start配合grid-template-areas或者直接用margin来调整位置，但绝对定位对于这种点对点的精准需求来说，操作起来更直观简单。

内容的提问来源于stack exchange，提问作者UrTech Tips