<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
Green
Tidak ada komentar:
Posting Komentar