网页元素定位故障：如何将彩色方块移至页面底部？

问题说明 #

需要将4个彩色方块放置在页面底部还原艺术作品，但设置position:absolute后方块固定在顶部无法移动；之前用position:relative时布局正常，但hover后颜色无法恢复。

当前效果：

目标效果：

核心问题分析 #

1. 绝对定位参考错误：全局给.block设置position:absolute后，未给父容器.boxes设置定位，导致所有方块默认相对于视口定位，挤在顶部。
2. Hover异常原因：position:relative时元素堆叠顺序混乱，hover触发区域被其他元素遮挡，导致颜色无法正常恢复。

修改后的代码 #

HTML（修正重复head标签） #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Homepage</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <div class="block block-1">
    <h1>Joseph Albers</h1>
  </div>
  <div class="boxes">
    <a href="bio.html" class="block block-2">
      <h2>Biography</h2>
    </a>

    <a href="artworks.html" class="block block-3">
      <h2>Artworks</h2>
    </a>

    <div class="block block-4">
      <h4>German-born artist and educator. The first living artist to be given a solo show at MoMA and at the Metropolitan Museum of Art in New York</h4>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>

CSS（修复定位与hover问题） #

/* 基础样式重置，避免默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh; /* 确保页面高度至少占满视口 */
}

.block{
  padding: 2vw;
  display: flex;
  overflow: hidden;
  transition: background-color 0.3s ease-in-out;
}

.block-1{
  background: red;
  width: 100vw;
  height: 100vw;
  position: relative;
}

/* 父容器设置定位，作为子元素的参考 */
.boxes {
  position: fixed;
  bottom: 5vw;
  right: 5vw;
  position: relative;
  height: fit-content;
}

/* 让方块相对于父容器底部右侧定位 */
.block-2, .block-3, .block-4 {
  position: absolute;
  bottom: 0;
  right: 0;
}

.block-2{
  background: orange;
  width: 80vw;
  height: 80vw;
}

.block-3{
  background: yellow;
  width: 50vw;
  height: 50vw;
}

.block-4{
  background: green;
  width: 30vw;
  height: 30vw;
  padding-bottom: 20px;
}

.block:hover{
  background-color: rgba(255,255,255,0.5);
}

修改要点说明 #

• 父容器定位：给.boxes设置position:relative，让内部绝对定位的方块以它为参考，避免相对于视口乱跑。
• 固定底部位置：通过.boxes的bottom和right属性，把整个方块组固定在页面底部右侧。
• 独立方块定位：将block-2/3/4的position:absolute单独设置，不影响block-1的布局，同时让它们堆叠在.boxes的底部右侧。
• Hover修复：每个方块都是独立的绝对定位元素，hover触发区域不会被遮挡，过渡动画正常生效。

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