案例:jQuery UI案例     状态:可编辑再运行    进入竖版
 运行结果 
AخA
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>.position() 实例</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <style>
8
  .positionDiv {
9
    position: absolute;
10
    width: 75px;
11
    height: 75px;
12
    background: green;
13
  }
14
  </style>
15
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
16
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
17
</head>
18
<body>
19
 
20
<div id="targetElement">
21
  <div class="positionDiv" id="position1"></div>
22
  <div class="positionDiv" id="position2"></div>
23
  <div class="positionDiv" id="position3"></div>
24
  <div class="positionDiv" id="position4"></div>
25
</div>
26
 
27
<script>
28
$( "#position1" ).position({
29
  my: "center",
30
  at: "center",
31
  of: "#targetElement"
32
});
33
 
34
$( "#position2" ).position({
35
  my: "left top",
36
  at: "left top",
37
  of: "#targetElement"
38
});
39
 
40
$( "#position3" ).position({
41
  my: "right center",
42
  at: "right bottom",
43
  of: "#targetElement"
44
});
45
 
46
$( document ).mousemove(function( event ) {
47
  $( "#position4" ).position({
48
    my: "left+3 bottom-3",