html5視頻標籤的Css對齊和定位

我有兩個視頻標籤，我想要在屏幕的底角對齊。另外，內部視頻標籤應重疊外視頻標籤，就像下面給出這一形象：html5視頻標籤的Css對齊和定位

enter image description here

<body> 
    <div class="container"> 
     <div class="widget_contaner"> 
      <div class="widget_head">this is head of widget</div> 
      <div class="widget_body"> 
       <video class="large_video" src="#"></video> 
       <video class="mini_video" src="#"></video> 
      </div> 
     </div> 
    </div> 
</body>

CSS

.widget_contaner { 
    right: 0px; 
    position: fixed; 
    bottom: 30px; 
    z-index: 99999999999999; 
} 
.widget_header { 
    background-color: #3fa757; 
    width: 240px; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: bold; 
    border: 1px solid #ccc; 
    font-size: 12px; 
    height: 25px; 
    line-height: 25px; 
    font-family:'Open Sans', sans-serif; 
    border-radius: 5px; 
} 
.widget_body { 
    width: 240px; 
    height: 150px; 
} 
.large_video { 
    height: 100%; 
    width: 100%; 
} 
.mini_video { 
    position: absolute; 
    height: 30%; 
    width: 30%; 
    bottom: 32px; 
    right: 4px; 
    opacity: 0.75; 
}

所以我想知道如何才能讓這些視頻標籤像圖片中給出的那樣相對定位？

的jsfiddle：click here

來源

2013-06-20 CuriousMind

我想你包括JS提琴的錯誤鏈接 - 以及在帖子的底部反正... –

我的不好。鏈接固定 – CuriousMind

喜歡這個？

http://jsfiddle.net/EbsaL/3/

我加了背景顏色，以便更容易看到

.widget_body { 
    width: 240px; 
    height: 150px; 
    position: relative; 
} 
.large_video { 
    height: 100%; 
    width: 100%; 
    background: green; 
} 
.mini_video { 
    position: absolute; 
    height: 30%; 
    width: 30%; 
    top: 0px; 
    right: 0px; 
    opacity: 0.75; 
    background: purple; 
}

小部件主體相對定位，你只需要給微型視頻位置絕對和右上0像素。如果你想要小部件位於右下角，然後做底部：0;爲小部件容器

來源

2013-06-20 18:35:25 Huangism

看看這是你在找什麼。請注意，我更改了背景和邊框，以便我可以看到它。主要需要絕對定位沿着添加到較大的視頻幀與一些bottom屬性設置爲0。

.large_video { 
    height: auto; 
    width: 100%; 
    border: 2px solid #000; 
    position: absolute; 
    bottom: 0; 
}

http://jsfiddle.net/derekstory/EbsaL/2/

來源

2013-06-20 18:28:27

html5視頻標籤的Css對齊和定位

回答

相關問題