元素如何可以有多个postion属性

一个元素明显不能同时设置2个position啊。。说实话我也跟1楼一样，很好奇你到底想干什么

做个游戏，left:center为什么不起作用啊

left:center本来就不是一个合法的样式。left具体的数值，加具体的单位，或者是百分比，没有center这样的东西

关于position 它有五种定位方式： absoulte/fixed/relative/static/inherit
其中：absolute/relative/fiixed 他们都有的属性left/right/top/bottom这四种属性；属性值是具体的px值;
你问 left：center 为什么没有反映，因为根本没有这个属性值啊~

建议你从基本的开始看起来，通过google查找一下css相关的介绍，概念搞不清你永远也永不对。
实践固然好，但是也要有个基本的轮廓才能定位问题。

我推荐你看看css哪些事儿，css权威指南等两本书，系统的了解一下position的来龙去脉。
经常用的是：
position:relative;position:absolute;position:fixed(有兼容性问题);
了解一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type='text/css'>
body { margin:0; padding:0; background-color:#fff; }
#frame { width:500px; height:500px; overflow:hidden; margin:0 auto; border:1px solid #000; position:relative; }
#game { width:700px; height:1000px; background-color:#0f0; position:absolute; left:-100px; top:-500px; }
#gameInner { postion:relative; width:1000px; height:1000px; }
</style>
<script type='text/javascript'>
function CreatePerson(life, mo) {
this.life = life;
this.mo = mo;
this.shenti = (new CreateShenTi('50px', '50px', '325px', '950px', 'red', 'person')).returnShenTi();
}CreatePerson.prototype.move = function() {
var that= this;
document.getElementById('gameInner').onclick = function(e) {
var e = e || window.event;
var x = that.shenti.offset().left;
var y = that.shenti.offset().top;
var mousex = e.pageX;
var mousey = e.pageY;
var _left = mousex - x;
var _top = y - e.pageY;
$('#game').css({left: '+=' + _left, top: '+=' + _top});
that.shenti.css({left: '+=' + _left, top: '-=' + _top});
//$('#game').animate({left: '+=' + _left, top: '+=' + _top}, 1000);
//that.shenti.animate({left: '+=' + _left, top: '-=' + _top}, 1000);
//alert(x);
//alert(mousex);
}
}function CreateSmallAnimal(life, mo) {
this.life = life;
this.mo = mo;
this.shenti = (new CreateShenTi('50px', '50px', '325px', '600px', 'black')).returnShenTi();
}function CreateShenTi(width, height, left, top, backgroundColor, id) {
this.width = width;
this.height = height;
this.left = left;
this.top = top;
this.backgroundColor = backgroundColor;
this.id = id;
}
CreateShenTi.prototype.returnShenTi = function() {
var $shenti = $('<div></div>');
$shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor});
if(this.id) $shenti.attr('id', this.id);
$('#gameInner').append($shenti);
return $('#gameInner').children().last();
}
$(function() {
var createPerson = new CreatePerson(1000, 800);
var createSmallAnimal = new CreateSmallAnimal(1000, 800);
createPerson.move();
});
</script>
</head><body>
<div id='frame'>
<div id='game'>
<div id='gameInner'>

</div>
</div>
</div>
</body>
</html>
游戏雏形，望大侠指点不足

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type='text/css'>
body { margin:0; padding:0; background-color:#fff; }
#frame { width:500px; height:500px; overflow:hidden; margin:0 auto; border:1px solid #000; position:relative; }
#game { width:700px; height:1000px; background-color:#000; position:absolute; left:-100px; top:-500px; }
#gameInner { postion:relative; width:1000px; height:1000px; }
</style>
<script type='text/javascript'>
function CreatePerson(life, mo, shenti) {
    this.life = life;
    this.mo = mo;
    //this.shenti = (new CreateShenTi('50px', '50px', '325px', '950px', 'red', 'person')).returnShenTi();
this.shenti = shenti;
}

CreatePerson.prototype.move = function() {
    var that= this;
    document.getElementById('gameInner').onclick = function(e) {
        var e = e || window.event;
        var x = that.shenti.offset().left;
        var y = that.shenti.offset().top;
        var mousex = e.pageX;
        var mousey = e.pageY;
        var _left = mousex - x;
        var _top = y - e.pageY;
        //$('#game').css({left: '+=' + _left, top: '+=' + _top});
        //that.shenti.css({left: '+=' + _left, top: '-=' + _top});
/*if(_left > 50) {
_left = 50;
} else if(_left < -50) {
_left = -50;
}
if(mousey > 50) {
_left = 50;
}*/
        $('#game').animate({left: '+=' + _left, top: '+=' + _top}, 5000);
        that.shenti.animate({left: '+=' + _left, top: '-=' + _top}, 5000);
        //alert(x);
        //alert(mousex);
    }
}

function CreateSmallAnimal(life, mo, shenti) {
    this.life = life;
    this.mo = mo;
    //this.shenti = (new CreateShenTi('50px', '50px', '325px', '600px', 'black')).returnShenTi();
this.shenti = shenti;
}CreateSmallAnimal.prototype.moveTo = function() {
var left = parseInt($('#person').css('left')) - 50;
var top = parseInt($('#person').css('top')) - 50;
this.shenti.animate({left: left, top: top}, 100000);
}

function CreateShenTi(width, height, left, top, backgroundColor, id, backgroundImage) {
    this.width = width;
    this.height = height;
    this.left = left;
    this.top = top;
    this.backgroundColor = backgroundColor;
    this.id = id;
this.backgroundImage= backgroundImage;
}
CreateShenTi.prototype.returnShenTi = function() {
    var $shenti = $('<div></div>');
    $shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor});
    if(this.id) $shenti.attr('id', this.id);
    $('#gameInner').append($shenti);
    return $('#gameInner').children().last();
}CreateShenTi.prototype.returnImageShenTi = function() {
    var $shenti = $('<div></div>');
var $image = $("<img width='50' height='50' />");
$image.attr('src', this.backgroundImage);
$shenti.append($image);
    $shenti.css({width: this.width, height: this.height, position: 'absolute', left: this.left, top: this.top, backgroundColor: this.backgroundColor, overflow:'hidden'});
    if(this.id) $shenti.attr('id', this.id);
    $('#gameInner').append($shenti);
    return $('#gameInner').children().last();
}$(function() {
    var createPerson = new CreatePerson(1000, 800, (new CreateShenTi('50px', '50px', '325px', '950px', 'black', 'person', 'http://bbs.game798.com/upload/uploadfile/2006-11/200611261659712522.jpg')).returnImageShenTi());
    var createSmallAnimal1 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '325px', '600px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
var createSmallAnimal2 = new CreateSmallAnimal(1000, 800, (new CreateShenTi('50px', '50px', '325px', '700px', 'black', '', 'http://img4.duitang.com/uploads/item/201207/13/20120713122035_zttmW.thumb.600_0.jpeg')).returnImageShenTi());
    createPerson.move();
createSmallAnimal1.moveTo();
createSmallAnimal2.moveTo();
});
</script>
</head>

<body>
<div id='frame'>
    <div id='game'>
        <div id='gameInner'>

        </div>
    </div>
</div>
</body>
</html>

调试易

元素如何可以有多个postion属性

解决方案 »