为什么我的视频和图像在我页面顶部彼此堆叠在一起

我在我的网站上添加了一个图像，但没有启动新线条并放置在视频下，而是将其放置在我的视频顶部，在中心文本的黑色梯度背景下。我该如何解决此问题，以便将图像放置在启动新线路而不是在视频上重叠的图像？

body
{
    margin: 0;
    padding: 0;
    background-color:  rgb(244,212,188) ;
    font-family: 'IntroDemo-BlackCapsInline';
}
@font-face
{
font-family: 'IntroDemo-BlackCapsInline';
src: url(IntroDemo-BlackCapsInline.otf);
}
.nav
{
    position: absolute;
    z-index: 2000;
    color: black;
    text-align: center;
    padding: 20px 0 20px 0;
    font-size: 19px;  
    width: 100%;
}
/* Padding will create space 
    between the words and the edges of the box*/
.nav > li
{
    display: inline-block; 
    padding: 0 25px 0 25px; /* top left bottom right*/
    /* This property will put all the elements
    in the same horizontal line*/
}
.nav > li > a
{
    text-decoration: none;
    color: #ee0000 ;
}
.nav > li > a:hover
{
  /*  color: rgb(116, 181, 255);*/
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px 20px 20px 20px;
}
.ban
{
   background-color:  #f0ebe2 ;
}
#left
{
    text-align: left;
    display: inline-block;
    color: #ee0000 ;
    width: 400px;
    text-align: center;
    font-size: 25px;
}
#right
{
    display:inline-block;
    float: right;
    color: #ee0000 ;
    width: 400px;
    text-align: center;
    font-size: 20px;
}
.bg-wrap .video-ele .content
{
    margin: 0;
    padding: 0;
}
.bg-wrap
{
    position: fixed;
    z-index: -1000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}
.video-ele
{
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;

}
.content
{
    position: absolute;
    width:100%;
    min-height: 100%;
    z-index: 1000;
    background-color: rgba(0,0,0,0.5);
}
.content h1
{
text-align: center;
font-size: 65px;
text-transform:uppercase; 
font-weight: 300;
padding-top: 15%;
margin-bottom: 10px;
color: white;
}
.content p
{
    text-align: center;
    font-size: 20px;
    letter-spacing: 3px;
    color: white
}
#pic
{
}

<!DOCTYPE html>
<html lang = "en" >
<head>
    <link href= "Basic_Style.css" rel = "stylesheet" type ="text/css">
    <meta charset = "UTF-8">
    <title> Basic Site</title>
</head>
<body>
        <div class = "ban">
                <h3 id = "left">Bubble</h3>
                <h4 id = "right">Contact Us: 111-444-7887</h4>
        </div>
<header>
        <nav>
                <ul class = "nav">
                        <li><a href = "#">Home</a></li>
                        <li><a href = "#">About</a></li>
                        <li><a href = "#">Contact</a></li>
                        <li><a href = "#">Inventory</a></li>
                        <li><a href = "#">Policy</a></li>
                    </ul>
        </nav>
     <div class = "bg-wrap">
             <video id = "video-ele" preload = "auto" autoplay = "true" loop= "loop" muted="muted">
                 <source src = "coffe.mp4" type = "video/mp4">
                Video not supported 
             </video>   
     </div>
     <div class = "content">
                <h1>This is my intro video</h1>
                <p>I hope you like it</p>
     </div>
     <div>
<img id = "pic" src = "new_1.jpg" alt="picture">
     </div>
</header>
 </div>

</body>
</html>

设置 position:absolute基本上使元素上方或下方"徘徊"。为了确保其他元素不重叠，您需要这样的东西：

.absolute-element {
   position: absolute;
   top: 0; left: 0;
   width: 200px;
   height: 200px;
}
.normal-element {
    margin-top: 205px;
    width: 200px;
    height: 200px;
}

您需要将视频以外的所有内容包装在标签中，并将其设置为坐在视频下方，或者一次使房间一个元素。您也可以使用绝对位置的视频的确切大小：

.absolute-element {
   position: absolute;
   top: 0; left: 0;
   width: 200px;
   height: 200px;
}
.div-overlapping-video {
    width: 200px;
    height: 200px;
}
.normal-element {
    width: 200px;
    height: 200px;
}

有了最后一个选项，您可能需要使用负面或正余量来确保DIV完全在视频中。

相关内容

最新更新

热门标签：