布局中的定位-CSDN博客

本文详细介绍了CSS中的绝对定位（absolute）和固定定位（fixed）的使用方法。通过实例展示了如何设置元素定位，使元素相对于设置了relative的元素或者浏览器窗口定位。同时，代码示例中演示了如何利用CSS实现顶部信息栏的固定定位以及内容区域的相对和绝对定位，以达到特定的布局效果。

设置定位

这样设置，要定位的元素添加定位方式，参考系设置为absolute.那该元素的位置，就是相对于设置了relative的元素而言

在这里插入图片描述
元素设置了position:absolute后，则找参考系。从离得最近的元素(B)开始查找，当有元素设置了position：relative/absolute/fixed后，则该元素为参考系，否则继续查找，当找不到时，则浏览器窗口为参考系。

固定定位position：fixed ：元素相对于整个网页来定位的，给想要定位的元素写上left和top值，那么在页面滑动的过程中，该元素保持相同的位置。

<!DOCTYPE>

<head>
    <title>定位</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
        /*固定定位*/
        .top{
            /*行高与容器高度一致,这样就美观很多了,竖直方向上的，可以居中了，水平方向在另外设置*/
            height: 110px;
            line-height: 110px;
            text-align: center;
            background-color: blue;
            width: 100%;
            height: 110px;
            position: fixed;
            left: 0;
            top: 0;
        }
        /*相对定位*/
        .box{
            width: 400px;height: 320;
            background: url(images/map.png);
            margin: 120px auto;
            position: relative;
        }
        .p1{
            left: 150px;
            top: 100;
            position: absolute;
        }

        .p1 .point{
            /*span是行内元素，*/
            /*对齐效果不好，用浮动float,浮动元素都是block块元素*/
            /*display: inline-block;*/
            width: 15px;height: 15px;
            background: blue;
            float: left;
        }
        .p1 .info{
            /*与point的行高一致，高度就整齐了*/
            line-height: 15px;
            float: left;
        }
    </style>
</head>

<body>
    
    <div class="top">
        顶部信息栏
    </div>
    <div class="box">
        <div class="p1">
            <span class="point"></span>
            <span class="info">心灵归属地</span>
        </div>
    </div>
    <div class="box">
        <div class="p1">
            <span class="point"></span>
            <span class="info">心灵归属地</span>
        </div>
    </div>
</body>

</html>