固定的位置不適用於視頻海報

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

我還測試把<video>內<div id="delete>但<div>要素不是vissible。

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

，讓我通過使用相對位置保持添加vissible元素後面。

謝謝！