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

実行結果

【親要素】position:fixed を指定しています。 bottom、right プロパティで位置指定しています。
【子要素】position:fixed を指定しています。
入れ子にしても親要素からの絶対位置ではありません! top、left プロパティで位置指定しているので、この例では常に画面左上端が基準位置となります。
※absolute と異なり、fixed を指定した場合は、スクロールしても要素は常に画面左上端に固定表示されます。

ソース

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

<div class="parent">
    【親要素】position:fixed を指定しています。
    bottom、right プロパティで位置指定しています。
    <div class="chiled">
        【子要素】position:fixed を指定しています。<br>
        入れ子にしても親要素からの絶対位置ではありません!
        top、left プロパティで位置指定しているので、この例では常に画面左上端が基準位置となります。<br>
        ※absolute と異なり、fixed を指定した場合は、スクロールしても要素は常に画面左上端に固定表示されます。
    </div>
</div>

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

polarized women