当使用 position: absolute; bottom: 0 对齐按钮到底部时，必须确保其最近的已定位祖先元素（即 position 值为 relative/absolute/fixed/sticky）是目标容器（如 .filmbox），否则定位将相对于整个文档失效。
当使用 `position: absolute; bottom: 0` 对齐按钮到底部时，必须确保其最近的**已定位祖先元素**（即 `position` 值为 `relative`/`absolute`/`fixed`/`sticky`）是目标容器（如 `.filmbox`），否则定位将相对于整个文档失效。
在 CSS 布局中，“对齐到底部”看似简单，但常因定位上下文缺失而失败。你当前代码中 .view 使用了 position: absolute; bottom: 0，本意是将其钉在 .filmbox 底部，但 .filminfo 并未设置 position: relative，而 .filmbox 本身也缺少定位声明——这导致浏览器将 .view 的 bottom: 0 解析为相对于 或 文档根，而非 .filmbox 容器，因此无法实现预期效果。
✅ 正确做法：为 .filmbox 添加 position: relative，使其成为 .view 的定位参考容器：
.filmbox {
overflow: hidden;
border-color: rgb(0, 0, 0);
background-color: rgb(36, 36, 36);
width: 180px;
height: 413px;
margin-right: 10px;
display: inline-block;
position: relative; /* ✅ 关键：创建定位上下文 */
}
.filminfo {
margin-top: -6px;
overflow: hidden;
/* 移除 position: relative —— 不再需要，避免干扰层级 */
}
.view {
display: block;
position: absolute;
bottom: 0; /* 相对于 .filmbox 底边 */
left: 50%;
transform: translateX(-50%); /* 更优雅的水平居中（替代 margin:auto） */
text-decoration: none;
text-align: center;
font-weight: bold;
padding: 6px 12px; /* 建议用 padding 替代大量 margin */
width: 140px;
background-color: #4a90e2;
color: white;
border-radius: 4px;
}同时，HTML 结构可保持简洁，无需额外 <div style="clear:both">（现代布局中已不推荐）：<pre class="brush:php;toolbar:false;"><div class="filmbox">
<img class="poster" src="{{x.poster.url}}" alt="{{x.title}}">
<div class="filminfo">
<div class="info">
<p class="rating">Ratings: {{ x.rating }}/5.0
<img src="{% static 'image/rating.png' %}" alt="rating">
<br>{{ x.title }}
</p>
</div>
<div class="view">
<a href="movie/{{x.id}}">View</a>
</div>
</div>
</div></pre><p>⚠️ 注意事项： </p>
<ul>
<li>绝对定位元素会脱离文档流，不影响父容器高度计算，因此 <code>.filmbox 的 height: 413px 必须显式设定或由内容撑开；
flexbox 或 grid 替代绝对定位（例如：.filmbox { display: flex; flex-direction: column; justify-content: space-between; }），但当前方案在固定高度场景下更可控； .filminfo 上误加 position: relative，否则 .view 将以它为参考，而它高度不确定，易导致错位。总结：position: absolute 的生效前提永远是——存在一个已定位的最近祖先。牢记这条规则，就能精准控制元素在任意容器内的锚点位置。
