jquery的css位置positon

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            
            margin: 10px;
        }
        #box{
            position: absolute;
            border: 5px solid #ccc;
            top: 50px;
            left: 50px;
        }    
        #box1,#box2,#box3{
            border: 1px solid #ccc;
            margin: 10px;
            background: #fff;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        #box1{
            /*1.只有先设置了相对和绝对才能设置left和top */
            /*2.相对和绝对是以最近的相对和绝对来起作用,如果前面没有设置，就以浏览器的左上方为坐标中心点 */
            /*3.绝对定位后div属性是浮动的，相对定位和绝对定位都是相对于父级*/
            position: absolute; /*可以把这个relative设置为absolute看一下效果*/
            
            top: 20px;
            left: 10px;
        }    
    </style>
</head>
<body>
    <div id="box">
        <div id="box1">
            111111111111
        </div>
        <div id="box2">
            222222222222
        </div>
        <div id="box3">
            333333333333
        </div>
    </div>
</body>
<script>
    var position = $("#box2").position();
    alert(position.top+"|"+position.left);
</script>
</html>
更多相关文章

随机推荐
