定位是CSS中最为重要的知识点，使用定位可以将选中的元素摆放到页面中的任意位置，定位一般会和偏移属性left、right、top、bottom共同使用。
定位方式分为四种：
1、static静态定位（没用）。
2、relative相对定位。
3、absolute绝对定位。
4、fixed固定定位。
本文先来讲解relative相对定位，下面看代码：
相对定位是相对自身的，也就是说，相对于被定位元素的原始位置。
先看没有使用定位的原始状态
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素标签定位方式之相对定位 position:relative</title>
</head>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
</style>
<body>
<div class="box"></div>
这是盒子底下的文字
</body>
</html>
显示结果如下：
解释一下：
html代码中有一个div，div的下面有一行文字，在正常情况下文字应该显示在div的下方，因为div为块标签，独占一行。
使用了定位以后变成了这样
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素标签定位方式之相对定位 position:relative</title>
</head>
<style>
.box{
width:200px;
height:200px;
background:#f00;
/* 相对定位 */
position:relative;
/* 设置偏移 */
/*margin-left:200px;*/
top:50px;
left:50px;
/*
相对定位总结：
1.参考自身在标准流中的位置进行偏移
2.可以覆盖别的元素
3.在标准流还占有空间（灵魂出窍）
*/
}
</style>
<body>
<div class="box"></div>
这是盒子底下的文字
</body>
</html>
显示结果如下：
解释一下：
使用了position:relative;后，div便脱离了标准流，但相对定位的脱离标准流和浮动float不同，被定位的元素依然占有原来的空间。
然后我们使用偏移属性top将div向下移动了50像素，又向右移动了50像素，结果是：div覆盖了文字。
总结：
相对定位属性为position:relative;，它是相对自己定位的，给元素设置定位属性后，通过上下左右的偏移属性来控制元素的偏移距离，元素偏移后依然占用原始位置，可以覆盖其它元素。
|
窥视卡
雷达卡
发表于 2023-2-1 14:54:27
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 09:22:52
