transform: translateX,Y()

実行結果

position: absolute;で実行しています。

プログラム

position: absolute;ページの左上がtop 0,left 0です。

  HTML
  <input type="checkbox" id="in1">sw
  <div class="div"></div>

  /*CSS*/
  .div{
    width:  100px; height: 30px;/*箱の大きさです*/
    position: absolute;
    top: 50vw;left: 20vw;
    /*場所は各自見つけてください*/
    background-color: #f00;
  #in1:checked ~ .div{/*スイッチが入ったとき*/
    transform: translateX(100px);}/*移動*/

最後の行が移動する命令です。

position: relative;

top: left
所属するタグ(今回はdiv0濃いグレーの正方形)の左上がtop 0,left 0です。

実行結果

プログラム

  HTML
  <input type="checkbox" id="in3">
  <!---チェックボックスをスイッチとして使います。-->
  <div class="div0"><!------------------------>
    <div class="mov1"></div>
  </div>

  /*CSS*/
  .div0{
    width: 200px;height: 200px;
    margin: 10px;
    background-color: #bce;
  } 
  .mov1{
    position: relative;
    width: 50px;height: 30px;/*箱の大きさです*/
    background-color: #cae;
    top: -20px;left: 10px;
    /*箱div0の左上からの座標です。*/
    transition: all 2s;}
  #in3:checked ~ .div0 .mov1{/*スイッチが入ったとき*/
    top: 100%;left:100%;}/*移動先*/ 

マイナスの値や大きな数字で枠の外に出ることもできます。

position: fixed;

position: fixed;画面全体の左上がtop 0,left 0です。

実行結果

形は前の実行で使ったdivのものを使います。プログラムはシンプルです。

プログラム

    HTML
    <input type="checkbox" id="in4">

    <!--チェックボックスをスイッチとして使います。-->
    <div class="mov1 fix"></div>
    形は前のmov1を使います。
  

  /*CSS*/
  .fix{position: fixed;
    top: 5%;left: 0%;}/*画面の中の座標です。*/
  #in4:checked ~ .mov1{/*スイッチが入ったとき*/
    top: 95%;left:90%;}/*移動先*/
  

スクロールすると少しずれる場合もありますが基本は画面に固定された座標系です。