CSS教程：position属性fixed、relative、absolute-马育民老师

# 说明

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

- static：默认值
- fixed：固定位置，脱离文档流
- relative：相对定位，以自身为基准点，不脱离文档流。
- absolute：绝对定位，以 **父元素** 为基准点，**脱离文档流**。一般父元素是 `relative` 定位，否则该元素不随着父元素移动

### left、top、right、bottom

`posititon` 需要配合 `left`、`top`、`right`、`bottom` 属性使用

# 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 案例

### 例子1

实现下图效果，`惠` 字在 商品名的右上角

[![](/upload/0/0/1IX5MGxD0cdA.png)](/upload/0/0/1IX5MGxD0cdA.png)

```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			.h{
				background-color: red;
				color: white;
				font-style: normal;
				font-size: 12px;
				position: relative; /*相对本身的位置进行定位*/
				top: -10px;
				left: -10px;
			}
		</style>
	</head>
	<body>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<div>
			iphone14 5G
			<i class="h">惠</i>
		</div>
		<br>
		<div>
			iphone14 5G
			<i class="h">惠</i>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>
```

### 例子2

[![](/upload/0/0/1IX37nySRPbu.png)](/upload/0/0/1IX37nySRPbu.png)

css样式：

```
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #f4f4f4;
    }
    .box{
        width: 220px;
        height: 300px;
        background-color: #fff;
        margin: 0 8px 8px 0;
    }
    .title{
        padding: 5px;
    }
    .box .title i{
        background-color: red;
        color: #fff;
        font-size: 6px;
        font-style: normal;
        position: relative; /*相对原来的位置，进行定位*/
        top: -6px; /*相对原来的位置，往上移动6px*/
        left: -6px; /*相对原来的位置，往左移动6px*/
    }
</style>
```

html：
```
<div class="box">
    <div>
        <img src="img/iphone.jpg" alt="">
    </div>
    <div class="title">
        Apple iPhone 13 (A2634) 256GB 星光色 支持移动联通电信5G
        <i>惠</i>
    </div>
</div>
<div class="box">
    <div>
        <img src="img/iphone.jpg" alt="">
    </div>
    <div class="title">
        Apple iPhone 13 (A2634) 256GB 星光色 支持移动联通电信5G
        <i>惠</i>
    </div>
</div>
<div class="box">
    <div>
        <img src="img/iphone.jpg" alt="">
    </div>
    <div class="title">
        Apple iPhone 13 (A2634) 256GB 星光色 支持移动联通电信5G
        <i>惠</i>
    </div>
</div>
```

# absolute

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

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

### 案例

[![](/upload/0/0/1IX37o1D67K0.png)](/upload/0/0/1IX37o1D67K0.png)

##### css

```
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #f4f4f4;
    }
    .box{
        width: 220px;
        height: 300px;
        background-color: #fff;
        margin: 0 8px 8px 0;
    }
    .hxj{
        background-image: url(img/hxj.png);
        width: 50px;
        height: 50px;
        position: absolute; /*绝对定位，参照父标签进行定位*/
        top: 0px; /* 距离父标签的顶部是0*/
        right: 0px; /* 距离父标签的右侧是0*/
    }

.wrapper{
        position: relative; /* 将父标签设置为 relative，子标签（absolute） 就参照该父标签进行定位。否则参照body定位*/
    }
</style>
```

##### html

```
<div class="box">
    <div class="wrapper">
        <img src="img/iphone.jpg" alt="">

<div class="hxj"></div>
    </div>
</div>
```

### 案例

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

[![](https://www.malaoshi.top/upload/pic/html/QQ20210607152204.png)](https://www.malaoshi.top/upload/pic/html/QQ20210607152204.png)

##### 代码
```
<!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>
```

原文出处：http://www.malaoshi.top/show_1IX1Ge3xtBJ9.html