�@Ajax�ŃI�u�W�F�N�g�Ȃǂ�������A�T�C�Y��ύX����ɂ̓X�^�C���V�[�g�̈ȉ��̃v���p�e�B���g�p���܂��B
���W�n�@position
���ʒu�@left
�c�ʒu�@top
�����@�@width
�c���@�@height
�@���W�n�͐���W (absolute)�A�����W (relative)�AHTML���C�A�E�g�K���ɏ]�� (static)�A�u���E�U���W�n (fixed)���w�肵�܂��B���̂����Ō��fixed��Internet Explorer 6�ł̓T�|�[�g����Ă��܂���B�����̍��W�n�Ŏ��p�ƂȂ���̂�absolute�ł��B����͐e�I�u�W�F�N�g�̌��_����ɂ������W�n�ɂȂ�܂��B���_�͍���ɂȂ�E���ɍs���ɏ]���č��W�l�͑傫���Ȃ�܂��B���w���W�n�Ƃ͏㉺�����ɂȂ��Ă��܂��B
�@���W�n���w�肷��A���Ƃ͈ʒu�A���ɃX�^�C���V�[�g�Őݒ�ł���l�����邾���ł��B�������AJavaScript�ő��삷��ꍇ�A�����Ȃ肱���̃v���p�e�B�ɒl�����Ă������Ȃ��i�܂��̓G���[�j�ɂȂ邱�Ƃ�����܂��B�Ⴆ�Έȉ��̃T���v���͕��@��S����肪�Ȃ��ɂ��ւ�炸�A���҂ǂ���ɃI�u�W�F�N�g���w����W�Ɉړ����܂���B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�ʒu���w�肷��i�����Ȃ���j</title>
<script type="text/javascript"><!--
function setPos(x,y)
{
document.getElementById("footer").style.left = x;
document.getElementById("footer").style.top = y;
}
// --></script>
</head>
<body>
<h1>�ʒu���w�肷��i�����Ȃ���j</h1>
<form>
<input type="button" value="�ύX����" onClick="setPos(100,200)"><br>
</form>
<div id="footer">�t�b�^�[�����ł��B</div>
</body>
</html>
�@�Ȃ��A�����Ȃ��̂��ƌ����ΒP���ɃX�^�C���V�[�g���ݒ肳��Ă��Ȃ����߂ł��B�܂�X�^�C���V�[�g�ō��W�l�Ȃǂ�ݒ肷��K�v������܂��B����͈ȉ��̂悤�ɃX�^�C���V�[�g��ݒ肷��Γ��삵�܂��B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�ʒu���w�肷��iabsolute�j</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function setPos(x,y)
{
document.getElementById("footer").style.left = x;
document.getElementById("footer").style.top = y;
}
// --></script>
</head>
<body>
<h1>�ʒu���w�肷��iabsolute�j</h1>
<form>
<input type="button" value="�ύX����" onClick="setPos(100,200)"><br>
</form>
<div id="footer">�t�b�^�[�����ł��B</div>
</body>
</html>
�y�X�^�C���V�[�g�t�@�C���Fmain.css�̓��e�z
#footer {
position:absolute;
left:10px;
top:100px;
border:1px blue solid;
width:100px;
height:80px;
background-color:#e0ffff;
}
�@��`����ꍇ�ɂ̓X�^�C���V�[�g��ID�ƃ^�O��ID���Ή�����悤�ɂ��Ă��������B
�@��قǍ��W�n�Ő���W�n�ł���position:absolute�͐e�I�u�W�F�N�g�̌��_������Ə����܂����B���ۂ̃T���v���Ō��Ă݂܂��傤�B�ȉ��̃T���v����div�^�O����div�^�O������q�ɂȂ��Ă��܂��B�����Ń{�^�����N���b�N����Ɛe�I�u�W�F�N�g�̍������Ƃ��Ĉړ����܂��B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�ʒu���w�肷��i�e�I�u�W�F�N�g��j</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function setPos(x,y)
{
document.getElementById("footer").style.left = x;
document.getElementById("footer").style.top = y;
}
// --></script>
</head>
<body>
<h1>�ʒu���w�肷��i�e�I�u�W�F�N�g��j</h1>
<form>
<input type="button" value="�ύX����" onClick="setPos(100,200)"><br>
<input type="button" value="���_�Ɉړ�" onClick="setPos(0,0)"><br>
</form>
<div id="mainContents">
<div id="footer">�t�b�^�[�����ł��B</div>
</div>
</body>
</html>
�@���ɕ����w�肵�Ă݂܂��傤�B������width�v���p�e�B�A�c����height�v���p�e�B�ł��B�ȉ��̃T���v���Ń{�^�����N���b�N����ƕ����ύX����܂��B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�����w�肷��iwidth, height�j</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function setSize(w,h)
{
document.getElementById("footer").style.width = w;
document.getElementById("footer").style.height = h;
}
// --></script>
</head>
<body>
<h1>�����w�肷��iwidth, height�j</h1>
<form>
<input type="button" value="�ύX����" onClick="setSize(300,200)"><br>
</form>
<div id="mainContents">
<div id="footer">�t�b�^�[�����ł��B</div>
</div>
</body>
</html>
�@���̂悤�ɂ��Ĉʒu�╝��ύX���邱�Ƃ��ł��܂��B�}�E�X���W��ݒ肷��}�E�X�ɒǏ]���ē����悤�ɂȂ�܂��B�i�T���v����
���s�����j
�@�}�E�X�̈ʒu�ɍ��킹�ĕ���ݒ肷�邱�Ƃ��ł��܂��B�i�T���v����
���s�����j
Ajax�ł͕��G��div������q�ɂȂ��Ă��܂��\��������܂��B�����Ȃ�ƁA�S�ẴI�u�W�F�N�g��ID���Ǘ�������A�q�I�u�W�F�N�g�̐e�I�u�W�F�N�g�Ȃǂ��Ǘ����Ȃ��Ƃ����Ȃ��Ȃ�\��������܂��B���̂悤�ȏꍇ�A�q�I�u�W�F�N�g����e�I�u�W�F�N�g�̏����擾����Ƒ����͔ėp�����������邱�Ƃ��ł��܂��B�q�I�u�W�F�N�g����e�I�u�W�F�N�g��parentNode�ŎQ�Ƃ��邱�Ƃ��ł��܂��B�ȉ��̃T���v���̓{�^�����N���b�N����Ɛe��ID����\�����A�e�̍��W��ύX������̂ł��B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�e�I�u�W�F�N�g���̎擾</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function getParentData()
{
pObj = document.getElementById("footer").parentNode;
document.getElementById("footer").innerHTML = pObj.id;
pObj.style.left = 200;
pObj.style.top = 300;
}
// --></script>
</head>
<body>
<h1>�e�I�u�W�F�N�g���̎擾</h1>
<form>
<input type="button" value="�e�I�u�W�F�N�g�ړ�" onClick="getParentData()">
</form>
<div id="mainContents">�ediv
<div id="footer">�qdiv�ł��B</div>
</div>
</body>
</html>
�@�e�I�u�W�F�N�g�̏�擾�ł���Έȉ��̂悤�ɂ��ă}�E�X�ɒǏ]������ꍇ�A�e�I�u�W�F�N�g��ID���ȂǂɈˑ����Ȃ��Ȃ�܂��B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�}�E�X�ɒǏ]�i�q�I�u�W�F�N�g�j</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function setPos(evt)
{
if (document.all)
{
x = event.x;
y = event.y;
}else{
x = evt.pageX;
y = evt.pageY;
}
parentObj = document.getElementById("footer").parentNode;
parentX = parseInt(parentObj.style.left);
parentY = parseInt(parentObj.style.top);
document.getElementById("footer").style.left = x -parentX;
document.getElementById("footer").style.top = y - parentY;
}
window.onload = function()
{
window.document.onmousemove = setPos;
document.getElementById("mainContents").style.left = "60px";
document.getElementById("mainContents").style.top = "100px";
}
// --></script>
</head>
<body>
<h1>�}�E�X�ɒǏ]�i�q�I�u�W�F�N�g�j</h1>
<div id="mainContents">
<div id="footer">�t�b�^�[�����ł��B</div>
</div>
</body>
</html>
�@���Ȃ݂ɐe���猩���q�̏ꍇ�ɂ͈ȉ��̂悤�ɂȂ�܂��B�Ԃɂ͂��܂�Ă��镶�����m�[�h�̂P�Ƃ��ăJ�E���g�����_�ɒ��ӂ��Ă��������B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�q�I�u�W�F�N�g���̎擾</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function getParentData()
{
cObj = document.getElementById("mainContents").childNodes;
cObj[1].innerHTML = cObj[1].id;
cObj[1].style.left = 200;
cObj[1].style.top = 300;
}
// --></script>
</head>
<body>
<h1>�q�I�u�W�F�N�g���̎擾</h1>
<form>
<input type="button" value="�q�I�u�W�F�N�g�ړ�" onClick="getParentData()">
</form>
<div id="mainContents">�ediv
<div id="footer">�qdiv�ł��B</div>
</div>
</body>
</html>
�@���̍��̃T���v���ł͎q�I�u�W�F�N�g�͐e�I�u�W�F�N�g����͂ݏo���Ă��A���̂܂ܕ\������Ă��܂��B�������AAjax�ł�Google Maps�̂悤�ɓ���͈̔͂������e��\��������K�v���łĂ��邱�Ƃ�����܂��B���̍��ł͕\���͈͂����߂�N���b�s���O�ɂ��Đ������܂��B
[
��́@8:�X�^�C���V�[�g�ւ̃A�N�Z�X���@ - �N���b�s���O�i�\���͈͎w��j -��]
[
�ڎ���]
(2006.1.14)