父元素固定位置div行为的宽度

Question

我有了这种奇怪的观察，有人肯定可以帮助我更好地理解。我有一个包含其他 div 的父 div.container 。第一个 div.background-div 有一个覆盖整个窗口的固定位置（只需将其放入初始状态，只需删除 div.container 即可将其从 DOM 中删除。）。奇怪的是，根据 devtools 元素（附图） div.container的宽度是512px，但是根据悬停效果，尺寸是全窗口的。为了解决悬停问题，我可以取出div.container的div.background-div。但是有没有办法使用 css 来利用这一点

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.background-div {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(68, 65, 68, 0.5);
}

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.wrapper {
  position: relative;
  display: flex;
  width: 512px;
  height: 512px;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
}

.container {
  border-radius: 8px;
  transition: box-shadow 500ms ease;
}

.container:hover {
  box-shadow: 0px 0px 50px rgba(189, 18, 189, 0.5);
  transition: box-shadow 500ms ease;
}

.card-container {
  position: absolute;
  top: 0;
  display: flex;
  transition: 500ms ease-in-out;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}

<div class="container">
  <div class="background-div"></div>
  <div class="letters">
    <span class="letters">Hello</span>
  </div>
  <div class="wrapper" title="click-me!">
    <div class="card-container">
      <img src="https://picsum.photos/512/512/?blur" alt="">
    </div>
    <div class="card-container">
      <img src="https://picsum.photos/seed/picsum/512/512" alt="">
    </div>
  </div>
  <a href="#" class="link-it">More</a>
</div>

似乎固定位置会导致非常规行为

Answer 1

这并不能真正回答问题，但可能会使解决方案更简单，无需所有位置CSS，只需将图像在屏幕上超级居中，然后在块内使用更简单/更少的CSS：

display: grid; place-items: center;

因此，只有当您将鼠标悬停在您设置的块上时，您才会获得“发光”。

body {
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100vw;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: grid;
  place-items: center;
}

.background-div {
  background-color: rgba(68, 65, 68, 0.5);
}

.wrapper {
  width: 512px;
  height: 512px;
  border-radius: 10px;
  overflow: hidden;
}

.container {
  border-radius: 8px;
  transition: box-shadow 500ms ease;
}

.container:hover {
  box-shadow: 0px 0px 50px rgba(189, 18, 189, 0.5);
  transition: box-shadow 500ms ease;
}

.card-container {
  display: flex;
  transition: 500ms ease-in-out;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}

<div class="container">
  <div class="background-div"></div>
  <div class="letters">
    <span class="letters">Hello</span>
  </div>
  <div class="wrapper" title="click-me!">
    <div class="card-container">
      <img src="https://picsum.photos/512/512/?blur" alt="">
    </div>
    <div class="card-container">
      <img src="https://picsum.photos/seed/picsum/512/512" alt="">
    </div>
  </div>
  <a href="#" class="link-it">More</a>
</div>