html - 在响应式设计中标题不会停留在视频上

Question

当我在浏览器中调整视频大小时，我试图让我的蓝色标题留在我的视频上。现在它只是从浏览器顶部移动了某个像素或百分比，这导致它被推离视频太远。我现在只希望它以移动设备为中心，所以您现在必须将浏览器的大小调整得更小。稍后我将在平板电脑和台式机上使用媒体查询。但现在我只是想让它在移动媒体查询中停留在一个地方。我希望这不会太困惑......如果有人有任何真正有用的建议!我将包含一个 JSfiddle，因为我认为您无法在此处的代码片段中调整浏览器的大小。不过，我还将在此处包含一个片段。感谢您的时间!

JsFiddle:https://jsfiddle.net/qbau0ze4/

#headline{
	text-align: center;
	position: absolute;
	
	
	
	
	top: 160px;
	left:30%;
	color:#00E3FF;
	line-height:20px;
	font-family: 'Orbitron', sans-serif;
	word-spacing: 1px;
	font-size:18px;
	
	}


#primary .imgbox2 .change  {
 width:100%;
 margin-left:15px;
 padding-top:15px;
	
}

.move{
	 width:100%;
 margin-left:15px;
 padding-top:15px;
	
	
}

/*

ul.menu, ul.menu ul.sub-menu{
padding: 0;	
}

ul.menu li, ul.menu ul.sub-menu li{
list-style-type:none;
display:block;

	
}

ul.menu li a, ul.menu li ul.sub-menu li a{
text-decoration: none;
color:#fff;
background:#666;
padding: 10px;
display:block;
margin:0;
	
}

ul.menu li{
position:relative;
float:left;
	
}

#hamburger{
	width:30px;
	height:25px;

	
}

ul.menu li ul.sub-menu {
opacity: 0;
position: absolute;
top:37px;
left:0;
width: 150px;;
margin: 0 0 0 -20px;	

}

ul.menu li:hover ul.sub-menu{
opacity:1;
left:30;
transition: ease-in-out all .4s;
-moz-transition:ease-in-out all .4s;
-webkit-transition:ease-in-out all .4s;

z-index:100;
margin: 0 0 0 0px;	
}


*/



/********NAV BAR**************/

ul.menu li ul.sub-menu {
opacity: 0;
position: absolute;
top:30px;
left:0;
width: 200px;
margin: 0 0 0 0px;	
float:left;
}

.fa-bars{
float:left;	
}


ul.menu li:hover ul.sub-menu{
opacity:1;
left:30;
transition: ease-in-out all .4s;
-moz-transition:ease-in-out all .4s;
-webkit-transition:ease-in-out all .4s;
float:left;
width:100%;

z-index:100;
margin: 0 0 0 0px;	
}



nav{
	padding:0px;
	}
	
nav ul li {
	
	}
	
nav ul li a {
	display:block;
	text-align: center;
	padding: 10px;
	background-color:#670809;
	color:white;
	text-decoration: none;
	border: none;
	
	margin: 0px;
	font-size: 16px;
	}
	
	
nav ul li a:hover {
	background-color: #5E5757;
	color: white ;
	}
	



/*****FIGURE STAY SAME/ADJUSTABLE/VIDEO/logo******/

figure.stayssame {
	width: 100%;
}
	
	
figure.adjustable {
		width: 29%;
}

figure video {
	width: 100%; 
	height: 80%;
}

.video-txt{
	position: absolute; 
	top: 30%; 
	z-index: 9; 
	color: #FFF; 
	width: 100%;  
	text-align: center; 
	font-size: 40px; 
}

object {
	position: absolute; 
	left: 30%; 
	top: 80px;
	z-index: 10; 
	 width: 40%; 
}

/*ALL CODE FROM DESKTOP*/

p{
	padding: 2%;
	}



html {
	  position: relative;
	  min-height: 100%;
	}

body {
	margin: 0 0 100px; 
	font-family: 'Inconsolata', monospace;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.4em;
}

.squish{
	margin-right:125px;	

}


.text{
	padding:5px;	
}

.button{
	margin-bottom: 50px;	
	margin-right:auto;
	margin-left:auto;
	margin-top:auto;
}

header {
	  position:fixed;
	  z-index: 1000;
	  width: 100%;
	  top: 0px;
	  background-color:#670809;
	 height:50px;
	  letter-spacing:1px;
	  line-height: 55px;
	  padding:9px;
	  word-spacing:5px;
}


header, h1, h2{
	
	font-family: 'Orbitron', sans-serif;
}

.space{
	
	padding: 5px;
	color:white;
}


form{
	padding-left: 20%;

}

/* header tags */

h1 {
 text-align: center;
 color:#013397;
 font-size: 40px;
 
 padding-top:50px;
	}

h2{
	text-align: center;
	color:#00E3FF;
	font-size: 30px;
	margin: 5px;
	padding:20px;
	}

p{
	text-align: left;
	}




.clearfix:after {

  content:" ";

  display:block;

  clear:both;
  

}

#box{
background-color:#94DBEC ;


}

hr.style2 {
	border-top: 3px double #00E3FF;
	width: 300px;
}

 hr.style2 {
    width: 100%;
  }
  
  
section{
width: 85%;
margin-left: auto;
margin-right:auto;
margin-top: 35px;
}

 .adjustable{
	width: 100%;
	max-width:100%;
	height:auto;
	margin: 1 em;
	
		
}



#inner{
height: 100px;
padding:15px 0;	
	
}


#container{
height:100%;

	
}



.imgbox5{
	padding-right:30px;
	padding-left:0px;
	
}

.imgbox4{
	
padding-right:30px;
	padding-left:0px;

}

.imgbox3{
padding-right:30px;
	padding-left:0px;

}


.imgbox2{
padding-right:30px;
	
	
}

.imgbox{
	
padding-right:30px;
	padding-left:0px;
	
}

#firstpara{
	background-color:#5E5757;
	color: white;
	
}

#secpara{
	background-color:#5E5757;
	color: white;
	
}

#thirdpara{
	background-color:#5E5757;
	color: white;
	
}

#fourthpara{
	background-color:#5E5757;
	color: white;
	
}
#primary{
	background-color:#5E5757;
	color: white;
}

#enroll{
margin:0;
padding:0;	
}


footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	
	height: 100px;
	padding-bottom: 2%;
	background-color:#670809;
	font-family: 'Inconsolata', monospace;
		
	/* text */
	
	padding-left: 10px;
	padding-top: 15px;
	color: #ffffff;
	font-size: 15px;
	text-align:center;
	
	
}

a { color: white; }

a, a:active { color: white;

text-decoration:none;

 }






.side{
left-margin:10px;
right-margin:10px;	
}

	
	
	
	
	
	
	#value{
	background-color:#5E5757;
	color: white;
	width:90%;
	margin-left: auto;
margin-right:auto;
margin-top:2%;
	

	

	}
	
	
	
#title{
color:white;
text-align:center;
padding-top:10px;

	
}
 img{
width: 100%;
   
  }
 


.msum{
	 position: absolute;
    bottom: 5%;
    width: 100%;
    display: block;
    width: 200px;
    height: 50px;
    
    left: 0;
    right: 0;
    margin: 0 auto;  
	
}

span{
font-size: 14px;	
}

.smaller{
font-size: 16px;
	
}




/*NAV BAR

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html{font-size: 62.5%; font-family: 'Open Sans', sans-serif;}
body{font-size: 1.6rem; min-height: 100vh;}
h1{font-size: 3rem; margin-bottom: 1rem;}
h2{font-size: 1.6rem;}
header{position: relative;}
main{padding: 2rem;}

/***************** NAVIGATION *************
nav ul{
	display: flex; 
	flex-wrap: wrap; 

	margin: 0 auto;		
   background: #670809;
}
nav ul,
nav li{
	flex: 1;	
}
nav li:last-child{border-bottom: none;}
nav a{
	text-decoration: none;
	color: inherit;
	display: block;
	font-size: 1.8rem;
}
nav a:hover{
	background: /*#adacac#555;
	color: #fff;
}
nav li{
	position: relative;
	line-height: 50px;
	color: #fff;
	text-align: center;
}  
nav input,
nav label{
	display: none;
	width: 36px; 
	height: 36px; 
	background: #555; 
	color: #fff; 
	text-align: center; 
	line-height: 36px;
	font-size: 1.6rem;
	border-radius: 4px;
} 
nav label{position: absolute; top: 8px; right: 8px; transition: .4s;}
nav label:hover{cursor:pointer;}
nav label:before{
	font-family: FontAwesome;
	font-size: 24px;
	content: "\f0c9";
	text-align: center;
}

/*************** MEDIA QUERIES ***************

	nav ul{
		transform: translateY(0);
		box-shadow: 0 0 5px rgba(0,0,0, .7);
      transition: all .5s;
	}
	nav li{
		flex: none; 
		width: 100%;
		border-bottom: solid 1px #777;
	} 
	nav input[type="checkbox"]:checked + ul{
		transform: translateY(-100%);
		width: 100%;
		background: #999;   
      transition: all .5s;
	}
	nav label{display: block;}  
	nav input[type="checkbox"]:checked + ul li:nth-child(1){
		background: #777; 
		color: #fff;
	}  
	
	#css-toggle-menu{
	float:right;
	margin: 10px;
	}
	
	
/*********FORMS CSS*************/




form.contact label{
display: block;
 
}

span{
display:block;
 border: none;
 color:#4B4B4B;
}

.clearfix:after {

  content:" ";

  display:block;

  clear:both;

}

section{
width: 95%;	

}
fieldset{
width: 45%;	
float:left;
border:none;

}

input.checks{
width: auto;	
}

.left{
width: 45%;
float:left;	
}
.right{
width:45%;
float: right;	
}


input{ 
	 border: none;
    border-bottom: 2px solid #959595;
	width:  300px;
	margin:3px;
	color:#6C6A6A;
	padding-top:10px;
	padding-bottom: 10px;
	
	}
	
	.bottom{
		 border: none;
    
	
	margin:3px;
	
	color:#6C6A6A;
	padding-top:10px;
	padding-bottom: 10px;
	width:  300px;
	}
	.fa{
margin-right: 10px;



	}
	legend{
	color:#2C2A2A;
	}
	
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color:#595959;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 150px;

}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

<body>



<header>


      <nav>
       <ul class="menu">
<li class="active">
	<a id="hamburger" href="#" ><i class="fa fa-bars fa-2x " aria-hidden="true"></i>
</a>
    
    <ul class="sub-menu">
    
    
    
    <li class="sub-menu">
	<a  class="space" href="#" >Home</a>
    </li>
    <li class="sub-menu">
	<a  class="space" href="#" >Programs</a>
    </li>
    <li class="sub-menu">
	<a  class="space"  href="#" >Assignments </a>
    </li>
    <li class="sub-menu">
	<a class="space"  href="#" > Enroll</a>
    </li>
    <li class="sub-menu">
	<a class="space"  href="#" >Contact</a>
    </li>
    
    </ul>
    
    </li>
    </ul>
   </nav>    
     </header>  
       
       <!--
       
       
         <ul class="main">
               <li><a class="space" href="">Home</a></li>
               <li><a class="space" href="">Programs</a></li>
               <li><a class="space" href="">Assignments</a></li>
               <li><a class="space" href="">Enroll</a></li>
               <li><a class="space" href="">Contact</a></li>
               
         </ul> -->
    


<!--
<header>


<nav>

<input type="checkbox" id="css-toggle-menu" name="css-toggle-menu"> 
<ul class="main">
<a class="space" href="headervideo2.html">Home</a>

<a class="space" href="about.css">Programs</a>
<a class="space" href="contact.css">Assignments</a>
<a class="space" href="msum.css"> Enroll</a>
<a class="space" href="msum.css"> Contact</a>


</ul>


<label for="css-toggle-menu" id="css-toggle-menu"></label> 

</nav>
-->






<div id="content">

<!--msum logo-->
<figure class="stayssame">
 <video controls loop poster="placeholder.png" autoplay>
  <source src="video.mp4" type="video/mp4">
 <!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
<h1 id="headline">Intermediate Web Design:
<br>
Fun, Insightful, Experience
</h1>
<object type="image/svg+xml" data="comweb2.svg" ></object>
</figure>


<div id="value" >

<div id="title">We Want You</div>
<p >
Intermediate Web Design is a great class to take because it is a fun learning experience that is taught through not only traditional lecture style classes, but group projects and interactive teaching. It is the class to take to learn professional standards and programs that are used in current digital offices. </p>
</div>

<div class="video-txt" ></div>

<section >

   <section>
   
   <div id="box">
<h1> GCOM 366</h1>
   <section class="clearfix" id="primary">
   
  <div class="imgbox2">
  <figure class="change">
    <img id="pic1" class="adjustable" src="RDesign3.jpg" alt="example web page" >
    </figure>
    
    </div>
  
   <h2> Benefits</h2>
   
   <p class="side">
   1.	Learn industry standard programs
   <br>
2.	Build Portfolio
<br>
3.	Increase collaboration skills
<br>
4. Become more creative 
<br>
5. Understand good layout
<br>
6. Feel confident in HTML/CSS
</p>
   </section>
   
   
   
   <section class="clearfix" id="firstpara">
  <div class="imgbox">
<img id="pic2" class="adjustable move" src="techpic4.jpg" alt="example web page" width="300" height="300">
</div>
<h2>Overview</h2>
<p class="side">
 Intermediate Web Design is a class that enhances the skills learned in intro to web design. Subjects will include web hosting, text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX, and Forms. You will learn through lectures, demonstrations, reading assignments, and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources. 
</p>
</section>

<section class="clearfix" id="secpara">
<div class="imgbox4">
<img id="pic3" class="adjustable float move" src="techpic1.jpg" alt="example web page" width="300" height="300" >
</div>
<h2>Student Review 1</h2><p class="side"> “Many different days before sections in the course are inspirational days. These talk about the industry standards and help to inspire students to "Create"
-Tyrion Lannister 
</p>

</section>

<section class="clearfix" id="thirdpara">
<div class="imgbox3">
<img  id="pic4" class="adjustable move" src="techpic2.jpg" alt="example web page" width="300" height="300" >
</div>
<h2>Student Review 2</h2> 
<p class="side">
"I've struggled with coding for ages but was able to finally get a grasp on it from this class"
-Tweety Bird 
</p>
</section>

<section class="clearfix" id="fourthpara">
<div class="imgbox5">
<img id="pic5" class="adjustable float move" src="techpic55" alt="example web page" width="300" height="300"  >
</div>
<h2>Student Review 3</h2> 
<p class="side">
“This class is up to date on the latest techniques, the instructor is willing to go the extra mile, and the class is well structured”
-Pappa Smurf
</p>
</section>
</div>


</section>

</div><!-- end of the row-->


<div class="center clearfix">
<h1>Contact</h1>

<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
<section class="clearfix">
<fieldset><legend>
<i class="fa fa-user" aria-hidden="true"></i>Personal Information
<hr class="style2">
</legend>
<label><span></span> <input name="first_name" type="text" value="" placeholder="First Name" autofocus required/>
</label>
<label><span>
</span><input name="last_name" type="text" value="" placeholder="Last Name" autofocus required/>
</label>
<label><span> </span><input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/>
</label>

<label><span>
 </span><input type="number" name="quantity" min="1" max="6" autofocus placeholder="number of years until next degree"></label>

<label ><span></span> <input name="level_of_education" type="hidden" value="" placeholder="level of education" autofocus required/></label>
<select class="bottom" name="education_level">
<option value="High School">High School</option>
<option value="Undergraduate">Undergradute</option>
<option value="Graduate">Graduate</option>
</select>






</fieldset>




<fieldset><legend><i class="fa fa-envelope-o" aria-hidden="true"></i>
Contact Information  <hr class="style2"></legend>

<label><span>
</span><input class="ghost-input" name="email" value="" type="email" placeholder="youremail@email.com" autocomplete="off" /></label>

<label><span></span><input name="phonenumber" value="" type="tel" placeholder="763-858-9564" /></label>

<label><span></span><input name="website" value="" type="url" placeholder="https://yourwebsite.com"/></label>



</fieldset>




</section>




<section class="clearfix column"  >


<fieldset><legend><i class="fa fa-laptop" aria-hidden="true"></i>
What are your Interests <hr class="style2"></legend>


<section class="clearfix column left"  >
<label class="bottom span" ><span ><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
</label>

<label  class="bottom"><span><input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development</span>
</label>

<label  class="bottom"><span><input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science</span></label>

</section>
<section class="clearfix column left"  >

<label  class="bottom"><span><input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design</span>
</label>

<label  class="bottom"><span><input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience</span></label>

<label  class="bottom"><span><input  class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development</span>
</label>
</section>

</fieldset>



<fieldset><legend><i class="fa fa-volume-control-phone" aria-hidden="true">

</i>

Continuation <hr class="style2 toosmall"></legend>

<section class="clearfix column left"  >

<legend class="smaller">You can contact me by:</legend>
<br>

<div class="squish">
<label  class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span></label>





<label  class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span></label>

<label  class="bottom"><span><input class="checks"  name="contact_me" type="radio" value="text"/>Contact me by text</span></label>
<br>
</div>
</section>


<section class="clearfix column left"  >
<legend class="smaller" >I'm interested in:</legend>
<br>

<label  class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span></label>
<label  class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Graduate</span></label>
<label  class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Online</span></label>
</section>


</fieldset>



</section>




<input class="button" name="submit_to_programmer" type="submit" value="Submit"/>
<input type="hidden" value="Message from Car Website" name="subject">
<input name="redirect" type="hidden" value="thanks.html">
</form>
<br>



<script src="https://use.fontawesome.com/8f5d316ef9.js"></script>
</div>


<footer>

<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
MaKayla McLain-Graning &copy; 2016</div>

<br>


<img class="msum" src="msum copy.png" alt="msum logo" />


</footer>


</body>

Answer 1

将 position: relative 添加到容器中，在本例中类元素保持不变。然后使用 position: absolute 定位您的标题。

.stayssame {
  position: relative;
}

#headline{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: auto;
}

jsfiddle:https://jsfiddle.net/Le0rrzf5/1/