<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="cp" value="${pageContext.request.contextPath}" ></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
            #div1{width:200px;height:200px;background-color:red;border-style:solid;border-width: 1px}
            #div2{width:150px;height:150px;background-color:green;border-style:solid;border-width: 1px}
            #div3{width:100px;height:100px;background-color:yellow;border-style:solid;border-width: 1px}
            .cursor{cursor:pointer;}
        </style>
        <script type="text/javascript" src="${cp}/js/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#div1").click(function(event){
                    alert("div1 click!" + (event.target == this));
                });        
                $("#div2").click(function(){
                    alert("div2 click!");
                });
                $("#div3").click(function(event){
                    alert("div3 click!");
                    event.stopPropagation()
                });
                //change default operation of tag a
                $("#lnk_a").click(function(event){
                    event.preventDefault();
                });
                //make div2 center
                $("#div2").css({
                    "background-color":"white",
                    "position":"relative",
                    left:function(index,value){
                        var w1 = $("#div1").width();
                        var w2 = $("#div2").width();
                        return (w1-w2)/2 - 1;
                    }
                });
                $("#div3").css({
                    "position":"relative",
                    left:function(index,value){
                        var w1 = $("#div2").width();
                        var w2 = $("#div3").width();
                        return (w1-w2)/2 - 1;
                    }
                });
                //showPosition
                $("#showPosition").click(function(){
                    var p1 = $("#div1").position();
                    var p2 = $("#div2").position();
                    var p3 = $("#div3").offset();
                    alert("div1 left:" + p1.left + " div2 left:" + p2.left + " div3 left:" + p3.left);
                });
            });
        </script>
    </head>
<body>
    <div id="div1">div1
        <div id="div2">div2
            <div id="div3">div3</div>
        </div>
    </div>
    <a id="link_a" href="http://www.baidu.com">link</a>
    <input type="button" value="show position" id="showPosition"/>
</body>
</html>

 

CSS position 属性

position 属性值的含义：

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

 

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。