登录    关于
马育民老师的博客

马育民的博客

QQ:65242847

CSS教程:position属性fixed、relative、absolute

说明

position 属性指定了元素的定位类型,有五个值:

  • static,默认值
  • fixed,固定位置
  • relative,相对定位
  • absolute,绝对定位

fixed

固定位置,类似电商网站的固定广告位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .guanggao{
            border: 1px solid red;
            width: 80px;
            height: 200px;
            position: fixed;
            top: 100px;
            left: 150px;

        }
    </style>
</head>
<body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="guanggao">
        固定广告位
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

relative

相对当前位置进行偏移

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
h2.pos_left
{
    position:relative;
    left:-20px;
}

h2.pos_right
{
    position:relative;
    left:20px;
}
</style>
</head>

<body>
<h2>正常位置的标题</h2>
<h2 class="pos_left">相对于其正常位置向左移动</h2>
<h2 class="pos_right">相对于其正常位置向右移动</h2>
</body>

</html>

absolute

相对 父元素 进行偏移,通常 父元素的 position属性是 relative

如果没有已定位的父元素,那么它的位置相对于 <html>元素

应用场景

如下图 红框处,价格部分 只设置 float浮动,其位置有偏差,此时需要用到 absolute

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            color: #666;
            font-size: 12px;
        }
        a{
            color: #666;
            font-size: 12px;
            text-decoration: none;
        }
        .item{
            float: left;
            height: 160px;
            width: 220px;
            margin: 0 0 10px 10px;
            /* border: 1px solid red; */
        }
        .item img{
            width: 220px;
        }
        .item-name{
            margin: 10px 0 10px 0;
        }
        .item-price{
            float: right;
            /*不加下面3个属性,会发生错位*/
            position: absolute;
            bottom: 0;
            right: 5px;
        }
        .item-price .item-money{
            font: 22px/1.5 tahoma;
            color: #f60;
        }
        .item-info{
            position: relative;
            height: 20px;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="1111.jpg" alt="">
        <p class="item-name">
            <a href="#">北京贝尔特酒店</a>
        </p>
        <p class="item-info">
            <a href="#">起前门/天坛公园/崇文门</a>
            <span class="item-price">
                ¥<span class="item-money">517</span>
            </span>
        </p>
    </div>
</body>
</html>

原文出处:https://malaoshi.top/show_1IX1Ge3xtBJ9.html