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 ng-app="com.ngbook.demo">
<head>
<meta name="description" content="position demo">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://greengerong.github.io/self/cdn/angular.js"></script>
</head>
<body >
     <div ng-controller="DemoController as demo" class="container">
​
        <br>
        <br>
         <position title ="no positioned parent"></position>
         
         <div style="position: relative;padding:50px;">
           <position title ="relative parent"></position>
             
             <div style="position: absolute;top:2500px; padding:50px;">
                 <position title="relative->absolute parent"></position>
             </div>
         </div>
         
         <div style="position: absolute;top:0px;left:250px; padding:50px;">
                 <position title="absolute parent"></position>
             </div>
         
         <script type="text/ng-template" id="/position.html">
           <table class="table">
               <thead>
                   <th colspan="2">{{title}}</th>
               </thead>
            <tbody>
               <tr ng-repeat="field in ['width', 'height', 'left', 'top']">
               <td>{{field}}</td>
               <td>{{data[field] | number}}</td>
             </tr>
            </tbody>
           </table>
         </script>
    </div>
</body>
</html>
Output

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

Dismiss x
public
Bin info
greengerongpro
0viewers