CSS中关于position

最新推荐文章于 2024-03-02 14:50:52 发布

拾指叁

最新推荐文章于 2024-03-02 14:50:52 发布

阅读量451

点赞数

文章标签： CSS position

本文链接：https://blog.csdn.net/W1948730080/article/details/80589111

版权

position的功能就如它的中文意思一样——位置。

在CSS中position有四个属性：

1.静态(static)

2.绝对定位(absolute)

3.相对定位(relative)

4.固定定位(fixed)

position:static;

静态就是默认值，是基本的定位规则，不使用position默认就是position:static。

position:absolute;

绝对定位就是使元素在left，right，top，bottom的作用下相对其最近的一个父元素进行定位（若无父元素就相对于body）。

如：

div{
    width:200px;
    height:200px;
    border:1px solid red;
    position:absolute;
    right:50px;
    top:20px;
}

<div id="div1">这是absolute</div>

ps: right:50px;理解为距最右侧50px，而不是向右移50px，初学者容易搞错(left,top,bottom同)。

相对定位是相对以前的位置进行定位，在只有没有父元素的情况下和绝对定位效果一致。

这个就比较厉害了，固定定位能够把视图固定，是它不随滚动条的拖动而移动。

如：

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    bottom:0;
    right:0;
}

（眼花缭乱。。。）

相信大家对绝对定位和相对定位的区别还是有疑惑的，别急，接下来我将向你揭开它们神秘的面纱。

绝对定位和相对定位的主要区别在绝对定位偏移前的位置不存在了，而相对定位偏移前的位置存在。

打个比方，绝对定位移动的是本体，移动后原位置什么都没有了；而相对定位移动的是影子，实际上它的本体还在原位。

下面用两段代码来加深理解：

div{
    width:200px;
    height:200px;
	border:2px solid red;
	position:absolute;
    left:100px;
    top:50px;
}

<body>
    <div id="div1"></div>
    <span>绝对定位，偏移之后原位置为空,相对定位，偏移之后原位置不为空</span>
</body>

这里要注意<span>标签是在<div>外的。

接下来我们把absolute改为relative。

div{
    width:200px;
    height:200px;
	border:2px solid red;
	position:relative;
    left:100px;
    top:50px;
}

关注