Sabtu, 23 Agustus 2025

DHTML - Using position: absolute with auto left/top

 <html>

<body>

<h2>Using position: absolute with auto left/top</h2>

<div style="width: 100px; height: 100px; background-color: red">

Red

</div>

<div style="position: absolute; width: 50px; height: 50px; background-color: blue;">

Blue

</div>

<div style="width: 100px; height: 100px; background-color: green">

<br><br><br>

Green

</div>

<br>

<hr>

<br>

<h2>Nesting elements and positioning</h2>

<div id="Outer" style="background-color: red; position: relative; width: 200px; height: 200px">

  Outer

  <br>

  <div id="Middle" style="background-color: blue; width: 100px; height: 100px">

    Middle

    <div id="Inner" style="position: absolute; top: 10px; left: 80px; background-color: green;">

      Inner 

    </div>

  </div>

  <br>

</div>

<script>

function showPosition() {

  var we;

  var windowDX, windowDY;

  var opName, opID;

  

  we = window.event.srcElement;

  

  if ((we.offsetParent) && (we.offsetParent.tagName != "BODY")) {

    windowDX = window.event.clientX - window.event.x;

    windowDY = window.event.clientY - window.event.y;

opName = we.offsetParent.tagName;

opID = we.offsetParent.id;

  } else {

    windowDX = 0;

windowDY = 0;

if (we.offsetParent) {

  opName = "BODY";

} else {

  opName = "null";

}

opID = "";

  }

  

  window.status = "Mouse Wnd: " + window.event.clientX + "," + window.event.clientY +

  " Mouse Prnt: " + window.event.x + "," + window.event.y +

  " Scroll: " + document.body.scrollLeft + "," + document.body.scrollTop +

                  " Over: " + we.tagName + " " + we.id +

  " Offset Prnt: " + opName + " " + opID +

  " Prnt Pos: " + we.offsetLeft + "," + we.offsetTop + 

  " Window Pos: " + (we.offsetLeft + windowDX + document.body.scrollLeft) + "," + (we.offsetTop + windowDY 


+ document.body.scrollTop);


}

document.onmousemove = showPosition;

</script>

</body>

</html>

Using position: absolute with auto left/top

Red
Blue



Green



Nesting elements and positioning

Outer
Middle
Inner

Tidak ada komentar: