relative親内での要素の配置

親要素<DIV>は<div style="position:relative;top:10;left:50>
要素DIV1にはstyle設定なし
要素DIV2にはstyle設定なし
要素DIV3は<div style="position:absolute;top:0;left:200;">
要素DIV4は<div style="position:relative;top:0;left:200;">
要素IMGは<img style="position:absolute;top:60;left:20">

これはDIV１要素です

これはDIV２要素です

これはDIV３要素です

これはDIV４要素です

　

子要素のoffset情報

結果(親要素がrelative設定されている場合)・子要素がabsolite設定の場合だけ、親要素がoffsetParentになり位置決めのの基準になる。
・それ以外では、親要素はoffsetParentにならず、子要素の位置決めに関与しない。

htmlsouse.gif (2461 バイト)

<div id="oya" style="position:relative;top:10;left:50;
    border:solid thin red">

    <div id="d1"><p>これはDIV１要素です</p></div>
    <div id="d2"><p>これはDIV２要素です</p></div>
    <div id="d3" style="position:absolute;top:0;left:200;">
        <p>これはDIV３要素です</p></div>
    <div id="d4" style="position:relative;top:0;left:200;">
        <p>これはDIV４要素です</p></div>
    <dd><img id="pic1" style="position:absolute;top:60;left:20"
        src="../../images/bt01.gif" width="70" height="31"></dd>
</div>

<p>offset情報<br>
<script language="JavaScript"><!--
    document.write("<table border=1 align='center'><tr>");
    document.write("<td>･･要素･･</td><td>offsetParent</td>
        <td>parentElement</td><td>offsetTop</td><td>offsetLeft</td>");
        document.write("<tr><td>DIV1</td><td>"+
        d1.offsetParent.tagName+"</td><td>"+d1.parentElement.tagName
        +"</td><td>"+d1.offsetTop+"</td><td>"+d1.offsetLeft+"</td></tr>");
    document.write("<tr><td>DIV2</td><td>"+d2.offsetParent.tagName
        +"</td><td>"+d2.parentElement.tagName+"</td><td>"+d2.offsetTop
        +"</td><td>"+d2.offsetLeft+"</td></tr>");
    document.write("<tr><td>DIV3</td><td>"
        +d3.offsetParent.tagName+"</td><td>"
        +d3.parentElement.tagName+"</td><td>"+d3.offsetTop
        +"</td><td>"+d3.offsetLeft+"</td></tr>");
    document.write("<tr><td>DIV4</td><td>"
        +d4.offsetParent.tagName+"</td><td>"
        +d4.parentElement.tagName+"</td><td>"+d4.offsetTop
        +"</td><td>"+d4.offsetLeft+"</td></tr>");
    document.write("<tr><td>IMG1</td><td>"
        +pic1.offsetParent.tagName+"</td><td>"
        +pic1.parentElement.tagName+"</td><td>"+pic1.offsetTop
        +"</td><td>"+pic1.offsetLeft+"</td></tr>");
    document.write("</table>");
//--></script> </p>

END(99/6/12)