css怎么设置相对定位和绝对定位

百变鹏仔 3个月前 (09-20) #CSS

文章标签 css

在css中，可以使用position属性来设置相对定位和绝对定位，给元素添加“position:relative;”样式即可设置相对定位，给元素添加“position:absolute;”样式即可设置绝对定位。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中，可以使用position属性来设置相对定位（relative）和绝对定位（absolute）。

相对定位 position:relative

position:relative;   → 必须先声明，自己要相对定位了，left:100px;       → 然后进行调整。top:150px;       → 然后进行调整。

1、相对定位的特性 - 不脱标,老家留坑,形影分离

相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘.

2、相对定位的用途

3、相对定位的定位值

position: relative;right: 100px;   → 往左边移动top: 100px;position: relative;	right: 100px;bottom: 100px;    → 移动方向是向上。

span{position: absolute;top: 100px;left: 100px;width: 100px;height: 100px;background-color: pink;}

1、参考点

2、以盒子为参考点 - 子绝父相

<div class=”box1”>  → 绝对定位<div class=”box2”>  → 相对定位	<div class=”box3”>  → 没有定位		<p></p>  → 绝对定位，以box2为参考定位。	</div></div></div>

3、绝对定位的盒子居中

绝对定位之后,所有标准流的规则,都不适用了.所以margin:0 auto;失效.

width: 600px;height: 60px;position: absolute;left: 50%;top: 0;margin-left: -300px;   → 宽度的一半

非常简单,当做公式记一下来.就是left:50%;margin-left:负的宽度的一半。

（学习视频分享：css视频教程）

文章推荐