Question

我正在尝试在右侧设置一个div，叠加到一个视频标签元素，该元素具有海报属性，但出于任何原因，当我设置属性right: 0以使其在右侧对齐时，它与文档的右侧对齐。

<div class="screen-container">
   <div id="delete"></div>
   <video id="preview"></video>
</div>

#screen-container{
   width: 515px;
   height: 600.23px;
}
#delete {
   width: 40px;
   height: 40px;
   background-color: white;
   background-size: 500px;
   background-position: -97px -75px;
   margin: 10px 10px;
   cursor: pointer;
   position: fixed;
   z-index: 1;
}
#preview{
   width: 100%;
   height: 100%;
}

我还测试过将<div id="delete>放在<video>内，但<div>元素不可用。

<div class="screen-container">
   <video id="preview">
      <div id="delete"></div>
   </video>
</div>

知道发生了什么事吗？

感谢您的建议

Answer 1

fixed定位会从文档流中删除元素，并且不能包含在父文档中。请改用position: absolute并将父.screen-container设置为position: relative。

Answer 2

根据jmore009的回答，我遇到了一些问题。为了解决其他情况，我刚刚添加了我在下面的代码中显示的内容：

<div class="screen-container">
   <div id="delete"></div>
   <video id="preview"></video>
</div>
<div class="screen-aux"></div>

.screen-container{
   position: absolute;
}

#delete{
   width: 40px;
   height: 40px;
   background-color: white;
   background-size: 500px;
   background-position: -97px -75px;
   margin: 10px 10px;
   cursor: pointer;
   position: absolute;
   z-index: 1;
   right: 0;
}

这允许我通过保持使用位置相对来添加可变元素。

谢谢！

固定的位置不适用于视频海报

2 个答案: