<title>absolute</title>
<style type="text/css" media="screen">
body { margin: 1px; padding: 5px; }
- div.absolute { position: absolute; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; }
+ div.absolute { position: absolute; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; background: #fff; }
#absolute-1 { top: 0; left: 0; }
#absolute-1-1 { top: 1px; left: 1px; }
#absolute-1-1-1 { top: 1px; left: 1px; }
#absolute-2 { top: 19px; left: 19px; }
+ #marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script type="text/javascript" src="../../../dist/jquery.js"></script>
- <script type="text/javascript" charset="utf-8"> $(function() { return; }); </script>
+ <script type="text/javascript" charset="utf-8">
+ $(function() {
+ $('.absolute').click(function() {
+ $('#marker').css( $(this).offset() );
+ return false;
+ });
+ });
+ </script>
</head>
<body>
<div id="absolute-1" class="absolute">absolute-1
</div>
</div>
<div id="absolute-2" class="absolute">absolute-2</div>
+ <div id="marker"></div>
</body>
</html>
\ No newline at end of file