Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
         #container {
             color: #ffffff;
             background-color: #ff0000;
             height: 50px;
             position: absolute;
             top: -100px;
             left:-100px;
         }
    </style>
</head>
<body>
​
    <div id="container">這是一段訊息</div>
    <hr>
    搜尋：<input id="search" type="text">
  
<script type="text/javascript">
    function offset(elem) {
        let x = 0;
        let y = 0;
        while(elem) {
            x += elem.offsetLeft;
            y += elem.offsetTop;
            elem = elem.offsetParent;
        }
      
        return { 
            x, 
            y, 
            toString() {
                return `(${this.x}, ${this.y})`;
            }
        };
    }
  
    let input = document.getElementById('search');
    let search = offset(input);
    let container = document.getElementById('container');
    container.style.left = `${search.x}px`;
    container.style.top = `${search.y + input.offsetHeight}px`;
    container.style.width = `${input.offsetWidth}px`;
</script>
​
</body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JustinSDKpro
0viewers