pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Interactive version of MDN's CSS position documentation

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS position</title>
<style>

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 960px;
    height: 960px;
    background: lightgray;
}

.box {
    width: 100px;
    height: 100px;
    background: red;
    padding: 20px;
    margin: 20px;
    color: white;
    font-weight: bold;
    float: left;
}

#two { position: relative; top: 20px; left: 20px; }

#myForm { position: absolute; left: 50px; top: 200px; }

</style>
<script src="https://d3js.org/d3.v4.min.js"></script>

<body>

<div id="container">
  <div class="box">One</div>
  <div class="box" id="two">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>

  <div id="myForm">
    <form>
      <input type="radio" name="position" value="static" checked>static (laid out in the flow, not positioned)<br>
      <input type="radio" name="position" value="relative">relative (laid out first, then positioned)<br>
      <input type="radio" name="position" value="absolute">absolute (positioned relative to nearest positioned ancestor/container)<br>
      <input type="radio" name="position" value="fixed">fixed (positioned relative to viewport)...Scroll me! (in my own scrollable window)<br>
    </form>
    <div id="myContent">
    </div>
    <div id="myMouse">
    </div>
  </div>
</div>

<script>

d3.select('form').on('change', changed);
d3.select("body").on('mousemove', mousemoved);

changed();

function changed() {
  var position = d3.selectAll('#myForm input:checked').attr('value');
  var two = d3.selectAll('#two').style('position', position);
  var props = ['left', 'top', 'width', 'height', 'right', 'bottom'];
  var clientRect = two.node().getBoundingClientRect();
  var str = "<br><b>Two's BoundingClientRect</b><br>";
  props.forEach(function(d) { str += d + ": " + clientRect[d] + "<br>" });
  d3.select('#myContent').html(str);
}

function mousemoved() {
  d3.select("#myMouse").html("<br>Mouse: " + d3.mouse(this));
}
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS position</title>
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	#container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 960px;
	background: lightgray;
	}

	.box {
	width: 100px;
	height: 100px;
	background: red;
	padding: 20px;
	margin: 20px;
	color: white;
	font-weight: bold;
	float: left;
	}

	#two { position: relative; top: 20px; left: 20px; }

	#myForm { position: absolute; left: 50px; top: 200px; }

	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>

	<body>

	<div id="container">
	<div class="box">One</div>
	<div class="box" id="two">Two</div>
	<div class="box">Three</div>
	<div class="box">Four</div>

	<div id="myForm">
	<form>
	<input type="radio" name="position" value="static" checked>static (laid out in the flow, not positioned)<br>
	<input type="radio" name="position" value="relative">relative (laid out first, then positioned)<br>
	<input type="radio" name="position" value="absolute">absolute (positioned relative to nearest positioned ancestor/container)<br>
	<input type="radio" name="position" value="fixed">fixed (positioned relative to viewport)...Scroll me! (in my own scrollable window)<br>
	</form>
	<div id="myContent">
	</div>
	<div id="myMouse">
	</div>
	</div>
	</div>

	<script>

	d3.select('form').on('change', changed);
	d3.select("body").on('mousemove', mousemoved);

	changed();

	function changed() {
	var position = d3.selectAll('#myForm input:checked').attr('value');
	var two = d3.selectAll('#two').style('position', position);
	var props = ['left', 'top', 'width', 'height', 'right', 'bottom'];
	var clientRect = two.node().getBoundingClientRect();
	var str = "<br><b>Two's BoundingClientRect</b><br>";
	props.forEach(function(d) { str += d + ": " + clientRect[d] + "<br>" });
	d3.select('#myContent').html(str);
	}

	function mousemoved() {
	d3.select("#myMouse").html("<br>Mouse: " + d3.mouse(this));
	}
	</script>