在網頁設計中，經常會遇到在頁面中嵌入視頻的需求。而對于視頻的位置安排，一般有兩種方式：固定在頁面中某一個位置不動；或者讓它隨著頁面的滾動而滑動。對于第一種方式，我們可以使用 CSS 的position屬性來實現。
首先，在 HTML 中嵌入視頻時，我們需要將視頻所在的
塊設為絕對定位（
position:absolute;），然后再通過 CSS 的left和top屬性來設置視頻在頁面中的位置。下面是一個例子：<style>
.video-wrapper {
position: absolute;
left: 200px;
top: 100px;
}
</style>
<div class="video-wrapper">
<video src="myVideo.mp4" controls></video>
</div>這段代碼中，我們讓包裹視頻的
塊絕對定位，并讓它距離頁面左側和頂部分別有 200px 和 100px 的距離，這樣就能把視頻放在離左上角 200px 和 100px 的位置上了。需要注意的是，視頻的實際大小和位置依賴于父容器（
.video-wrapper）的大小和位置。如果你希望視頻能隨著頁面的滾動而移動，那么你可以使用 CSS 的position:fixed;屬性。這個屬性會讓元素相對于瀏覽器窗口固定不動，而不是相對于它的父容器。下面是一個例子：
<style>
.video-wrapper {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="video-wrapper">
<video src="myVideo.mp4" controls></video>
</div>這里，我們將包裹視頻的
塊設置為固定定位，并讓它距離窗口左側和頂部分別為 50%，然后再用
transform:translate(-50%,-50%);將視頻自身移動到其寬高的中心。這樣，不論用戶如何滾動頁面，視頻都會保持在瀏覽器窗口的中間位置。上一篇css規定樣式優先級
下一篇css視頻播放列表展現