ブログパーツとか: CSSシミュレータ（position）

【使い方】textareaの中身（値）を書き換えて色々と試してみる static（初期値）
　top、bottom、left、rightは適用されない

relative
　現在地からの位置を指定する

absolute
　staticでない直近の親要素上の位置を指定する

fixed
　画面上の位置を指定する

sticky
　サイドバーのスクロール時における固定／追従を指定する（そういう使い方が多い）
　親要素の height の範囲内で機能する

HTML

<div id="positionDisplay"></div>

<⚠textarea style="width:99%;height:400px;font-family:monospace;" id="positionTextarea" onInput="positionSimulator();">
<style>
#positionDisplay {        /*大きい箱*/
    position: relative ;
    height: px ;          /*箱のサイズ（縦）*/
    border:1px solid;
   }

#positionDisplay .red {   /*赤い箱*/
    position:  ;          /*static relative absolute fixed sticky*/
    top:  ;               /*上端からの距離（下へ）*/
    bottom:  ;            /*下端からの距離（上へ）*/
    left:  ;              /*左端からの距離（右へ）*/
    right:  ;             /*右端からの距離（左へ）*/
    width:200px;height:200px;background-color:red;
   }

#positionDisplay .blue {  /*青い箱*/
    position:  ;          /*static relative absolute fixed sticky*/
    top:  ;               /*上端からの距離（下へ）*/
    bottom:  ;            /*下端からの距離（上へ）*/
    left:  ;              /*左端からの距離（右へ）*/
    right:  ;             /*右端からの距離（左へ）*/
    width:200px;height:200px;background-color:blue;
   }
</style>
<div class="red"></div>
<div class="blue"></div>
<⚠/textarea><!--⚠は削除する-->

JavaScript

<script>
var positionSimulator=function(){
    document.getElementById("positionDisplay").innerHTML=document.getElementById("positionTextarea").value;
   }
onLoad=positionSimulator();
</script>

2020年3月26日木曜日

CSSシミュレータ（position）