Question

我在网站上添加了图片，但不是在视频下方添加新行，而是将其放置在页面顶部的视频顶部和中间的黑色渐变背景下文本。如何解决此问题，以便可以将图像放在新行的开头，而不是重叠在视频上？

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>

Answer 1

设置position:absolute基本上会使元素“悬停”在其他元素之上或之下。为了确保其他元素不重叠，您需要这样的东西：

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

.normal-element {
    margin-top: 205px;
    width: 200px;
    height: 200px;
}

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

.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恰好在视频内部。

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

1 个答案: