position：relative

作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素

特点：

可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。
相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有
任何元素都可以设置为relative，他的绝对定位的后代可以相对于他进行绝对定位
也能使浮动的元素发生偏移，并控制他们的堆叠顺序（z-index）

案例一（对第一和第二个特点进行解释）

有三个div，以常规流的方式排列。

<body><div class="box"></div><div class="box"></div><div class="box"></div>
</body>

.box{height: 200px;width: 200px;border: 2px solid;
}

现在对第二个盒子加相对定位

.box:nth-child(2){position:relative;left: 200px;border-color: red;
}

效果：

可以看出第二个盒子盒子相对于自己原来的位置进行了left：10px；并且原来的空间还在那，并没有被下面的元素所代替。

案例二（第三个特点）

在一个父类（parent类）div里面嵌套一个字类（child类）div

<body><div class="parent"><div class="child"></div></div>
</body>

*{margin: 0;padding: 0;
}
.parent{height: 500px;width: 500px;border: 2px solid;position: relative;margin: 0 auto;
}
.child{height: 200px;width: 200px;position:absolute;left: 20px;border-color: peachpuff;background-color: salmon;
}

效果图：

外面的div加了个relation，里面的加了给absolution、left：10px，里面的div相对于父div向右移了10px

案例三（解释第四个特点，也能使浮动的元素发生偏移，并控制他们的堆叠顺序（z-index））

这个案例使两个浮动的水平相邻的div重叠，并且运用z-index属性控制谁在上面谁在下面，注意：两个div都要加position：relative

效果：

代码：

<!DOCTYPE html>
<html><head><meta charset="{CHARSET}"><title></title><style type="text/css">*{margin: 0;padding: 0;}.box1{width: 200px;height: 200px;border: 1px skyblue solid;float: left;text-align: center;line-height: 200px;z-index: 9;position: relative;}.box2{width: 200px;height: 200px;border: 1px darkkhaki solid;float: left;position: relative;left: -201px;text-align: center;line-height: 200px;z-index: 1;}</style>     </head><body><div class="box1">box1</div><div class="box2">box2</div></body>
</html>

position之relative相关推荐

兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position：relative属性的子元素...
IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang=" ...
CSS里面position：relative与position：absolute 区别
position:absolute这个是绝对定位: 是相对于浏览器的定位. 比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离 ...
CSS之定位布局（position，relative定位布局技巧）
文章目录 1.什么是定位: 2.各个属性值的描述: 3.各个属性值的具体作用: 4.定位布局技巧:position:relative 与 position:absolute 结合使用: 1.什么是定位 ...
HTML之position:absolute relative static fixed的区别和理解
HTML之position:absolute relative static fixed的区别在理解position:absolute relative static fixed的区别时,我们先需要 ...
[css] position的relative和absolute定位原点是哪里？
[css] position的relative和absolute定位原点是哪里? absolute: 定位原点为第一个position不为static的父级元素的左上角. 可以基于该特性实现heigh ...
CSS 浅析position：relative/absolute定位方式
一.position:relative 相对定位分两种情况分析: · 无 position: relative: · 有 position: relative. 代码如下图: 显示效果如下图: 我们 ...
CSS中position的relative和absolute.
2021 first note CSS中position的relative和absolute. 之前接触过, 听老师讲的时候, 赶脚自己挺明白的, 后来就放下了, 最近又开始复习, 发现有些熟悉但更多 ...
position：absolute与position：relative的区别
absolute意思为绝对的,relative意为相对的.然而其用法与我们平常所想的有所不同. 大多数人可能会觉得absolute绝对定位是根据浏览器窗口定位,实则不是.absolute定位是相对于父 ...
CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用
准备布局: <!DOCTYPE html> <html> <head> <style> *{ margin:0; padding:0; } .base- ...
CSS中position属性(relative,absolute,fixed)和display中的inline-block
前言平时很少写CSS,用的多也就是Bootstrap来堆样式,写起来快一点,但是有时候需要自己写,很久没写容易忘记,这里记录下这两个常用属性position和display 这里贴一条CSDN设置图 ...

position之relative

position：relative

案例一（对第一和第二个特点进行解释）

案例二（第三个特点）

案例三（解释第四个特点，也能使浮动的元素发生偏移，并控制他们的堆叠顺序（z-index））

position之relative相关推荐

最新文章

热门文章