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

我想设置一个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%; 
}

我还测试把<video>内<div id="delete>但<div>要素不是vissible。

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

有什么想法发生了什么？

感谢建议

来源

2014-12-31 DevStarlight

fixed定位删除从文档的流动的元件，并且不能被包含在父内。改为使用position: absolute，并将父母.screen-container设置为position: relative。

来源

2014-12-31 03:59:30 jmore009

继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; 
}

，让我通过使用相对位置保持添加vissible元素后面。

谢谢！

来源

2014-12-31 12:52:58 DevStarlight

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

回答

相关问题