<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="tile"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<form>
  <fieldset>
    <legend>5th tile controls<br>origin in <span id="origin">dotted violet</span></legend>
    <br>
    <h3>position</h3>
    <label>
      <input type="radio" name="position" value="static" checked="checked"> static
    </label>
    <label>
      <input type="radio" name="position" value="relative"> relative
    </label>
    <label>
      <input type="radio" name="position" value="absolute"> absolute
    </label>
    <label>
      <input type="radio" name="position" value="fixed"> fixed
    </label>
  </fieldset>
  <br>
  <label>position top-left<br/>
    <input id="positionser" type="number" value="-5" />
  </label>
  <br><br>
  <label>margin top-left<br/>
    <input id="marginer" type="number" value="0" />
  </label>
</form>

$size: 100px;

section,
form {
  float: left;
}

form {
  margin: 10px;
}

section {
  position: relative;
  counter-reset: tile;
  margin: 10px;
  padding:10px;
  width: $size * 3.3;
  outline: 2px dotted blue;
  // pad ghost
  &:before {
    content: ' ';
    display: table-cell;
    position: absolute;
    height: $size;
    width: $size;
    outline: 2px dotted violet;
    z-index: 999;
    top: 120px;
    left: 120px;
  }
  
  &:after {
    content:' ';
    display: block;
    clear: both;
  }
}

div {
  background: blue;
  color: white;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  
  &#tile {
    // initials, to match with the HTML values
    top: -5px;
    left: -5px;
    background: red;
  }
  
  &:before {
    display: table-cell;
    counter-increment: tile;
    content: counter(tile);
    text-align: center;
    vertical-align: middle;
    font-family: sans-serif;
    font-weight: bold;
    height: $size;
    width: $size;
  }
}

#origin {
  color: violet;
  display: inline-block;
  outline: 2px dotted violet;
}

section[data-tile-position="absolute"] {
  &:before {
    height: 5px;
    width: 5px;
    top: 0px;
    left: 0px;
  }
}

section[data-tile-position="fixed"] {
  &:before {
    position: fixed;
    height: 5px;
    width: 5px;
    top: 0px;
    left: 0px;
  }
}

// apply position
$('[name="position"]').change(function () {
  $('#tile').css({
    position: this.value
  });
  $('section').attr('data-tile-position', this.value);
});

// apply padding
$('#positionser').change(function() {
  $('#tile').css({
    left: this.value + 'px',
    top: this.value + 'px'
  })
});

// apply margin
$('#marginer').change(function() {
  $('#tile').css({
    marginLeft: this.value + 'px',
    marginTop: this.value + 'px'
  })
});