css position

by ihope

HTML

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<h3>Position</h3>
<div class="example">
  <div class="container">
    <div class="block before">before static</div>
    <div class="block top10 left10"> static top10 left10</div>
    <div class="block after">top and other corr properties has no effect with static because static is relay only to html tree layout</div>
  </div>
  <div class="container">
    <div class="block before">before relative</div>
    <div class="block relative top10 left10">relative top10 left10</div>
    <div class="block after">after relative</div>
  </div>
  <div class="container">
    <div class="block before">before absolute</div>
    <div class="block absolute top10 right10">absolute top10 right10</div>
    <div class="block after">after absolute</div>
  </div>
  <div class="container">
    <div class="block before">before fixed</div>
    <div class="block fixed">fixed</div>
    <div class="block after">after fixed</div>
  </div>
  <div class="container" id="steaky">
    <div class="block before">before sticky</div>
    <div class="block sticky top0">sticky top0</div>
    <div class="block after">after sticky after sticky after sticky after sticky after sticky after sticky after sticky after sticky after sticky after sticky after sticky </div>
  </div>
</div>

<div class="margin example">
  <div class="box">Margin</div>
</div>

<div class="info">
  <div class="panel fixed bottom10 right10"></div>
  <svg width="100%" height="100%">
    <rect y="-1.0" x="-1.0" height="0.0" width="0.0" id="overlay" style="fill:#fff;fill-opacity:0.4;stroke:#ff0000;stroke-width:2.0;paint-order:fill markers stroke;stroke-miterlimit:4;stroke-dasharray:6,3;stroke-dashoffset:0" />
  </svg>
</div>

CSS

* {
  /* outline: #f0f 1px solid; */
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

svg {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.info .panel {
  pointer-events: none;
  z-index: 2000;
  font-size: 12px;
  width: 25em;
  font-family: consolas;
  border-color: #3994D6;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: #3994D6;
  border-radius: 0.5em;
  height: 10em;
}

.info .panel span {
  display: inline-block;
  width: 100%;
  padding: 0 0.5em 0.2em 0.5em;
}

.info .panel span:nth-child(1) {
  padding: 0;
  background-color: #000;
  color: #fff;
  font-weight: 600;
}

body,
html {
  margin: 0;
  padding: 0;
}

body {
  background: url(http://localhost:8000/gridO35.png);
  border: #00f 1px solid;
}

.top {
  height: 1000px;
  position: relative;
  left: 50px;
  /* border: #f00 1px solid; */
}

.container {
  margin: 30px;
  background: #333;
  display: inline-block;
  width: 200px;
}

.block {
  padding: 5px;
  background: #FFCE3E;
  height: 15px;
  color: black;
}

.block.before {
  background: #E27393;
  color: white;
}

.block.after {
  background: #47429D;
  color: white;
  height: auto;
}

.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.top0 {
  top: 0px;
}

.top10 {
  top: 10px;
}

.bottom0 {
  bottom: 0px;
}

.bottom10 {
  bottom: 10px;
}

.left0 {
  left: 0px;
}

.left10 {
  left: 10px;
}

.right0 {
  right: 0px;
}

.right10 {
  right: 10px;
}

.sticky {
  position: sticky;
}

.example {
  background-color: #555;
  margin-top: 10px;
  margin-left: 10vw;
  margin-right: 10vw;
  width: 80vw;
  height: auto;
  padding: 0;
}

.box {
  margin: 50%;
}

.tail {
  height: 1000px;
}

JavaScript

var panel = document.querySelector(".info .panel");
var overlay = document.querySelector("#overlay");
var xpath = function(elem) {
  ret = [];
  while (elem.parentElement) {
    var id = elem.getAttribute('id')
    var nth = _.findIndex(_.toArray(elem.parentElement.children), x => x == elem) + 1;

    if (id) {
      ret.push(`#${id}`);
      break;
    } else {
      if (elem.parentElement.children.length != 1 && elem.tagName != 'BODY') {
        ret.push(`${elem.tagName}:nth-child(${nth})`);
      } else {
        ret.push(`${elem.tagName}`);
      }

    }

    elem = elem.parentElement;
  }
  return ret.reverse().join(" > ").toLowerCase();
};
(function() {
  document.onmousemove = handleMouseMove;
  document.onwheel = handleMouseMove;
  window.resize = handleMouseMove;

  function handleMouseMove(event) {
    overlay.style.display = "none"
    var elem = document.elementFromPoint(event.clientX, event.clientY);
    var cs = getComputedStyle(elem);
    var rect = elem.getBoundingClientRect();

    panel.style.left = event.clientX + "px";
    panel.style.top = event.clientY + 20 + "px";
    if (cs && elem) {
      overlay.setAttribute('x', rect.left);
      overlay.setAttribute('y', rect.top);
      //overlay.setAttribute('width' , cs.width);
      overlay.setAttribute('height', rect.bottom - rect.top);
      //overlay.setAttribute('height' , cs.height);
      overlay.setAttribute('width', rect.right - rect.left);
      var elem_xpath = xpath(elem);
      var html = `<span>${elem_xpath} </span>` +
        `<span>X: ${rect.left}  Y: ${rect.top} W: ${cs.width} H: ${cs.height}</span>` +
        `<span>Elem margin: ${cs.margin}</span>` + `<span>Mouse Page X: ${event.pageX}  Y: ${event.pageY} </span>` + `<span>Mouse Client X: ${event.clientX}  Y: ${event.clientY} </span>`;
      panel.innerHTML = html;

      overlay.style.display = "block"
    }
  }
})();