PHP & JavaScript Room :: 設置サンプル

実行結果

【親要素】position:absolute を指定しています。
right、bottom プロパティで位置指定しています。
【子要素】position:absolute を指定しています。
親要素にテキスト部分が含まれていても無視されます。 この例では、top、left プロパティで位置指定しているので、常に親要素の左上端が基準位置となります。

ソース

<style type="text/css">
    div.parent {
        position:absolute;
        bottom:10px; right:10px;
        background-color:silver; margin:0; padding:5px; width:430px;
    }
    div.chiled {
        position:absolute;
        top:100px; left:-100px;
        background-color:yellow; margin:0; padding:5px; width:430px;
    }
</style>

<div class="parent">
    【親要素】position:absolute を指定しています。<br>
    right、bottom プロパティで位置指定しています。
    <div class="chiled">
        【子要素】position:absolute を指定しています。<br>
        親要素にテキスト部分が含まれていても無視されます。
        この例では、top、left プロパティで位置指定しているので、常に親要素の左上端が基準位置となります。
    </div>
</div>

<script type="text/javascript">
    for(var i=0; i<50; i++){ document.write("LINE "+ i + "<br \/>\n"); }
</script>

polarized women