jsp里面的元素怎么样不随着页面大小而移动 想固定死！！！！！！！！！！！！！！！
代码 粘贴出来看看！
页面设置一个min-length，当页面 小于这个size时，就固定不变了
用绝对尺寸和绝对位置，贴代码
利用绝对定位，比如
<html>
<head>
<style type="text/css">
#test
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
<%@ page contentType="text/html;charset=utf-8"%>
<%@ page language="java" import="java.util.*"%>
<%@ page language="java" import="com.beyond.framework.common.config.*"%>
<%@ page language="java" import="com.beyond.framework.util.tools.*"%>
<%@ page language="java" import="com.beyond.framework.user.entity.*"%>
<%@ page import="com.beyond.framework.dictionary.entity.DictionaryInfo"%>
<%@page import="com.beyond.framework.jurisdiction.entity.AdminGroupInfo"%>
<%@ page language="java" import="com.mohe.retailer.order.entity.*"%>
<%@page import="com.beyond.framework.util.tools.Global"%>
<%@ taglib uri="/pageTag" prefix="pageTag"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String path = request.getContextPath();
UserInfo loginUserInfo = (UserInfo) session.getAttribute(SessionConfig.ADMIN_USER_INFO);
Order order = (Order)request.getAttribute("order1");
if(order == null){
order = new Order();
}
boolean isAdd = order == null || order.getOId() == null ? true : false;
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>POS收银</title>
<script type="text/javascript">
/*加减乘除*/
function compute(op)
{
var num1,num2;
num1=parseFloat(document.myform.num1.value);
num2=parseFloat(document.myform.num2.value);
if (op=="+")
document.myform.result.value=num1+num2 ;
if (op=="-")
document.myform.result.value=num1-num2 ;
if (op=="*")
document.myform.result.value=num1*num2 ;
if (op=="/" && num2!=0)
document.myform.result.value=num1/num2 ;
}
/*求和*/
function init(){
debugger
var trs=document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
var tds=trs[i].getElementsByTagName("td");
var m=0;
for(var j=0;j<tds.length;j++){
m+=parseInt(tds[j].innerHTML);
}
var s=document.createElement("td");
s.innerHTML=m;
trs[i].appendChild(s);
}
}
/*删除事件*/
function deleteRow(e)
{
e=e||event;
var btn=e.srcElement||e.target;
btn.parentNode.parentNode.parentNode.removeChild(btn.parentNode.parentNode);
}
function clock_12h()
{
var today = new Date(); //获得当前时间
//获得年、月、日，Date()函数中的月份是从0－11计算
var year = today.getFullYear();
var month = today.getMonth()+1;
var date = today.getDate();
var hour = today.getHours(); //获得小时、分钟、秒
var minute = today.getMinutes();
var second = today.getSeconds();
var apm="AM"; //默认显示上午: AM
if (hour>12) //按12小时制显示
{
hour=hour-12;
apm="PM" ;
}
var weekday = 0;
switch(today.getDay()){
case 0:
weekday = "星期日";
break;
case 1:
weekday = "星期一";
break;
case 2:
weekday = "星期二";
break;
case 3:
weekday = "星期三";
break;
case 4:
weekday = "星期四";
break;
case 5:
weekday = "星期五";
break;
case 6:
weekday = "星期六";
break;
}
/*设置div的内容为当前时间*/
document.getElementById("myclock").innerHTML=year+"年"+month+"月"+date+"日 "+hour+":"+minute+":"+second+" "+apm+" "+weekday+"";
}
/*使用setInterval()每间隔指定毫秒后调用clock_12h()*/
var myTime = setInterval("clock_12h()",1000);
</script>
<style type="text/css">
#center{
margin:0 200px 0 200px;
height:450px;
background:#000000;
border:1px solid #FFFFFF;
color: white;
overflow-y:scroll;
}
#button {
width:50px;
height:25px;
font-size:10px;
color:black;
}
#button1 {
width:140px;
height:70px;
font-size:30px;
color:black;
}
#all1{
width:1080px;
padding:25px;
background-color:#000000;
margin:0 auto;
text-align: center;
color: white;
}
#top1{
position:fixed;_position:
absolute;bottom:0;
left:25%;
_bottom:auto;
_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
margin-bottom:10px;
color: white;
}
#top2{
position:fixed;_position:
absolute;bottom:0;
left:38%;
_bottom:auto;
_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
margin-bottom:10px;
color: white;
}
#top3{
position:fixed;_position:
absolute;bottom:0;
left:53%;
_bottom:auto;
_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
margin-bottom:10px;
color: white;
}
#top4{
position:fixed;_position:
absolute;bottom:0;
left:75%;
_bottom:auto;
_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
margin-bottom:10px;
color: white;
}
#top5{
position:fixed;_position:
absolute;bottom:0;
left:80%;
_bottom:auto;
_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
margin-bottom:10px;
color: white;
}
#top{
color: white;
}
#topp{
color: red;
}
#tableText td{
width: 162px;
}
.sidebar{color:#FFFFFF; }
</style></head>
<body bgcolor="#000000">
<div id="top" align="center">
<p><h1>您好，欢迎使用超市收银系统</h1></p>
</div>
<div align="center" class="sidebar">
<p id="myclock" > </p>
</div>
<div onload="init()" id="all1" >
<form id="userForm" method="post" style="margin-left: 15%;">
会员账号：<input type="text" placeholder="会员账号" size="20" maxlength="13" name="mId" value="<%=Global.nvlToString(order.getMId())%>">
操作员：<input type="text" size="20" maxlength="13" name="uId" value="<%=Global.nvlToString(order.getUId())%>">
商品编号：<input style="margin-right: 21.1%" type="text" id="code" placeholder="商品编号" size="20" maxlength="13" >
<input type="button" value="订单号" onclick="getRand()" Hidden Button/><!-- 生成随机数按钮 -->
<input id="num1" name="oId" type="text" size="15" Hidden Test/><!-- 随机数1 -->
<input type="hidden" name="oYtotalprice" value="<%=Global.nvlToString(order.getoYtotalprice())%>" id="yyys" >
<input type="hidden" name="oStotalprice" value="<%=Global.nvlToString(order.getoStotalprice())%>" id="sssy">
<script type="text/javascript">
var num1 = document.getElementById("num1");
var result = document.getElementById("result");
function getRand(){
num1.value = Math.floor((Math.random() * 1000000) + 1);
}
getRand();/*初始化*/
</script>
</p>
</form>
</div>
<div id="center">
<table id="tableText" style=" margin-left: 17%;">
<tr>
<td>商品名称</td>
<td>数量</td>
<td>单价(元)</td>
<td>小计(元)</td>
<td>操作</td>
</tr>
</table>
</body>
</div>
<div id="top1" >
<table id="tableText"width="728" border="0" >
<tbody>
<tr>
<td width="280">合计：<input style="font-weight:bold;font-style:italic ;font-size:20px;align:center;" type="text" height="91"width="280"value="<%=Global.nvlToString(order.getoYtotalprice())%>" disabled="disabled" size="5" id="yyy" >元</td>
</tr>
<tr>
<td width="280">实收：<input type="text" style="font-weight:bold;font-style:italic ;font-size:20px;align:center;" height="91"width="280"value="<%=Global.nvlToString(order.getoStotalprice())%>" disabled="disabled" size="5" id="sss">元</td>
</tr>
<!-- <tr>
<td width="280"><input type="submit" name="收款" style="cursor:pointer;" value="确认收款" id="add" onclick="formsubmit()"> </td>
</tr>
<tr>
<td width="280" style="cursor:pointer;" onclick="window.location='http://localhost:8484/market/index.do#/market/jurisdiction/roleList.do'">返回</td>
</tr>
-->
</tbody>
</table>
</div>
<div id="top2" >
<table id="tableText"width="728" border="0" >
<tbody>
<tr>
<td width="280">实际收款：<input style="font-weight:bold;font-style:italic ; font-size:20px;align:center;" type="text" height="91"width="280" size="5" >元</td>
</tr>
<tr>
<td width="280">应找零钱：<input style="font-weight:bold;font-style:italic ; font-size:20px;align:center;" type="text" height="91"width="280" size="5">元</td>
</tr>
</tbody>
</table>
</div>
<div id="top3" >
<input type="submit" name="收款" style="cursor:pointer;" value="确认收款" id="button1" onclick="formsubmit()">
<input type="button" name="返回" style="cursor:pointer;" value="返回" id="button1" onclick="window.location='http://localhost:8484/market/index.do#/market/jurisdiction/roleList.do'">
</div>
<div id="top4" >
<table id="tableText"width="728" border="0" >
<tbody>
<tr>
<td width="280">F5:刷新</td>
</tr>
<tr>
<td width="280">Tab:换行</td>
</tr>
</tbody>
</table>
</div>
<div id="top5" >
<table id="tableText"width="728" border="0" >
<tbody>
<tr>
<td width="280">F9:收款</td>
</tr>
<tr>
<td width="280">F10:返回</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="<%=path%>/common/smartadmin/js/libs/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
/* var jq$ = jQuery.noConflict(); //防止$符号与其他的冲突 */
$(document).ready(function () { //防止在DOM元素加载完成就执行jQuery代码，从而避免产生不必要的错误
$("*").keydown(function (e) {//判断按键
e = window.event || e || e.which;
if (e.keyCode == 112 || e.keyCode == 113
|| e.keyCode == 114 || e.keyCode == 115
|| e.keyCode == 117
|| e.keyCode == 118 || e.keyCode == 119
|| e.keyCode == 122 || e.keyCode == 123) {
e.keyCode = 0;
return false;
}
});
//document.onhelp = function () { return false };//
window.onhelp = function () { return false };//ie下面不能屏蔽f1键的补充方法,和上面的一行的效果是一样的，选其一
});
var number=0;
$("#code").keydown(function(){
debugger
if (event.keyCode == "13") {//keyCode=13是回车键
var gId = $("#code").val();
$("#code").val("");
url = "<%=path%>/pos/getGoodsById.do";
$.ajax({
type: 'post',
url: url,
data: {
"gId":gId
},
cache: false,
dataType: "json",
success: function(data) {
/* alert(JSON.stringify(data)) */
if (data.error_code == "0") {
var html="";
html+="<tr><td><input type=\'text\' value='"+data.com.gname+"' name=\'商品名称\' disabled=\'disabled\'></td>";
html+="<td><input type=\'text\' value=\'1\' onchange=\'chang(this,"+number+")\';; name=\'数量\' id=\'"+number+"number\'></td>";
html+="<td><input type=\'text\' value=\'"+data.com.gsellprice+"\' name=\'单价\' disabled=\'disabled\' id=\'"+number+"price\' name=\'pice\'></td>";
html+="<td><input type=\'text\' value=\'"+(data.com.gsellprice)+"\' name=\'小计\' id=\'"+number+"smallprice\' name=\'pice\'disabled=\'disabled\'></td>";
html+="<td><input type=\'button\' style=\'cursor:pointer;\' name=\'操作\' value=\'删除\' id=\'button\' onclick=\'deleteRow()\'> </td>";
html+="</tr>";
$("#tableText").append(html);
number=number+1;
aaa();
}
}
});
}
})
function aaa(tableText) {
var price = new Array();
var number = new Array();
var sum = 0;
$("#tableText :input[name=单价]").each(function(i){
price.push(this.value);
});
$("#tableText :input[name=数量]").each(function(i){
number.push(this.value);
});
for (var i = 0; i < price.length; i++) {
for (var m = 0; m < number.length; m++) {
if(i==m){
sum+=decimal(number[m]*1*price[m]*1,2)
}
}
}
$("#yyy").val(decimal(sum,2));
$("#sss").val(Math.floor(sum * 10)/10);
$("#yyys").val(decimal(sum,2));
$("#sssy").val(Math.floor(sum * 10)/10);
$("#zzz").val(Math.floor(sum * 10)/10);
}
function decimal(num,v){
var vv = Math.pow(10,v);
return Math.round(num*vv)/vv;
}
function chang(obj,id){
var ID =id;
var priceid=ID+"price";
var pr="#"+priceid;
var price=$(pr).val();
var number=obj.value;
var pricrd=price*1000;
var small=(number*pricrd)/1000;
var smalls=ID+"smallprice";
var sm="#"+smalls;
$(sm).val(small);
/* alert($(obj).parent("td").next().next().children().val()); */
}
$(document).keydown(function(){
if (event.keyCode==121) {
//F10的键值为121
window.location='http://localhost:8484/market/index.do#/market/jurisdiction/roleList.do';
}
})
$(document).keydown(function(){
if (event.keyCode==117) {
//F6的键值为117
deleteRow(e);
}else if (event.keyCode==120) {
//F9的键值为120
formsubmit();
}
})
/**
*收款处理
*/
function formsubmit() {
debugger
var div = "<div class='loading-div'></div>";
$("#myModal").after(div);
var url = '';
$(".modal-backdrop").remove();
url = "<%=path%>/order/receivables.do";
$.ajax({
type: 'post',
url: url,
data:$("#userForm").serialize(),
/* {
"oId":$("#num1").val(),
"oYtotalprice":$("#yyys").val(),
"oStotalprice":$("#sssy").val()
}, */
cache: false,
dataType: "json",
success: function(data) {
number=0;
$(".loading-div").remove();
if (data.error_code == "0") {
alert("收款成功");
queryList();
}
}
});
location.reload();
}
</script>
</body>
</html>
我看你的css里面都是用相对定位，而且用的都是百分比！肯定会随着页面大小 变化而变化
这定位的问题， 和css有关，你需要改的是元素的定位问题，A是参照物，B是需要定位的元素。则 A 的css加上 position：relative 。 B 的css 加上 position:absulte ,top:值; left:值;。如果你用的是火狐，打开控制台，你会看到 body默认带上 position: relative;