Inheriting text decoration with different positions

by Jools Chadwick

HTML

<div id="parent">
  <div id="child">
    Sample
  </div>
</div>

<div id="buttons"/>

CSS

#parent{
  text-decoration:underline;
}
#buttons{
  position:absolute;
  top:30px;
}

JavaScript

var positions = ['static','relative','fixed', 'absolute']


for(idx in positions){
	$('#buttons').append($('<input/>').prop('type','button').prop('value',positions[idx]))
}

$('input').click(function(){
  $('#child').css('position',this.value);
})