我正在尝试在我的网页上放置一些内容，当我缩小页面大小时，它会动态地改变大小。我目前对特定地点进行了硬编码，如：
<img class="img-responsive" style="position: absolute; top: 250; right: 0;"
src="/static/Pictures/16848_REGO_LOGO_nP1.png" height="450" width="450">
<img class="img-responsive" style="position: absolute; top: 410; left: 0;"
src="/static/Pictures/baked_icon.png" height="300" width="300">
以及页面中心的视频：
<div style="text-align: center">
<video controls="controls" autoplay="autoplay" width="550" height="350">
<source src="http://regotrade.com/static/Videos/Rego.mp4" type="video/mp4" />
<source src="http://regotrade.com/static/Videos/Rego.webm" type="video/webm" />
<source src="http://regotrade.com/static/Videos/Rego.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="550" height="350">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fregotrade.com%2Fstatic%2FVideos%2FRego.mp4','autoPlay':true}]}" />
<span title="No video playback capabilities, please download the video below">RegoTrade Video</span>
</object>
当我缩小页面时，右侧的图像会折叠到中间的视频上，最终如果我将其缩小到足够小，则两个图像都位于视频的顶部。有更好的方法吗？
编辑：我的完整代码：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<link rel="shortcut icon" type="image/x-icon" href="/static/Pictures/regoIcon.ico" />
<style>
.jumbotron{
margin-bottom:20px;
margin-top:0px;
padding:10px 0 10px 0;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/style.css" />
<title>Rego Trade Signup Page</title>
</head>
<body>
<div class="center">
</div>
<script type="text/javascript" src="/static/js/main.js"></script>
</body>
<div class="jumbotron img-responsive" height:auto style="background:#CCFFFF !important">
<h1>
<div style="text-align: center">
<strong>
<div style="font-size:79px">
<span style="color:#38B859">Rego</span><span style="color:#008FAF">Trade</span>
</div>
</strong>
</div>
</h1>
<div style="text-align: center">
<h4> Pre-register now, and we'll donate $1 to charity! </h4>
</div>
<div style="text-align: center">
<h5> Full Site Coming Soon... </h5>
</div>
</div>
</html>
<div style="position: absolute; top: 500; left: 0;">
</div>
<img class="img-responsive" style="position: absolute; top: 250; right: 0;"
src="/static/Pictures/16848_REGO_LOGO_nP1.png" height="450" width="450">
<img class="img-responsive" style="position: absolute; top: 410; left: 0;"
src="/static/Pictures/baked_icon.png" height="300" width="300">
<body bgcolor="#E6E6FA">
<form action="" method="post">
<div style="position: absolute; top: 355; left: 0;">
<h3><strong>A proud partner of Baked Cookies!</strong></h3>
</div>
<div style="position: absolute; top: 600; left: 0;">
<h5><strong>Mention RegoTrade and get 15% off your entire order!</strong></h4>
</div>
<div style="position: absolute; top: 625; left: 0;">
<h5><strong>(Valid through December 2015)</strong></h4>
</div>
<div style="position: absolute; top: 650; left: 0;">
<h5><strong>(812)-336-2253</strong></h4>
</div>
<div style="text-align: center">
<strong><label for="email"><font face="verdana" style="color:#008FAF"><div style="font-size:18px">Pre-Register:</div></font></label></strong>
<input id="email" name="email" type="email" size="34" placeholder= "email@indiana.edu"/>
<br>
<br>
<div style="font-size:18px">
<strong><font face="verdana" style="color:#38B859">Charity:</font></strong>
<select name="charity">
<option value="Indiana University Dance Marathon">Indiana University Dance Marathon</option>
<option value="Big Man on Campus">Big Man on Campus</option>
<option value="Drop the Puck on Cancer">Drop the Puck on Cancer</option>
</select>
</div>
<br>
<button type="submit" class="btn btn-info" onclick="alert('Your donation will be counted as soon as the email you have preregistered with is used to make an account. You will be able to make an account very soon!
Donations will be made next school year (2016 IDUM and BMOC, and 2017 DPOC.)');"> Sign Up </button>
</div>
</form>
<div style="text-align: center">
<video controls="controls" autoplay="autoplay" width="550" height="350">
<source src="http://regotrade.com/static/Videos/Rego.mp4" type="video/mp4" />
<source src="http://regotrade.com/static/Videos/Rego.webm" type="video/webm" />
<source src="http://regotrade.com/static/Videos/Rego.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="550" height="350">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fregotrade.com%2Fstatic%2FVideos%2FRego.mp4','autoPlay':true}]}" />
<span title="No video playback capabilities, please download the video below">RegoTrade Video</span>
</object>
</video>
<p>
<strong>Video didn't load? <a href="http://regotrade.com/static/Videos/Rego.mov">Download Video Here</a></strong>
</p>
<p>
<a href="/contact">Contact Us</a>
</p>
</div>
</body>
<!--
<div>
<a href="/login" style="positon: absolute; bottom: 0; left: 0;"><font size="4">Log In</font></a>
<a href="/signup" style="positon: absolute; bottom: 0; left: 100;"><font size="4">Create Account</font></a>
</div> -->