开发者学堂课程【CSS 快速掌握:相对定位】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/611/detail/9201
相对定位
内容介绍
一、相对定位
一、相对定位
相对定位相当于“自己”来定位;
语法:position: relative;
特点:
1.相对定位元素它没有脱离标准文档流
2.相对定位元素没有设置定位坐标,那么相对定位元素还在原来位置
3.相对定位元素设置了定位坐标,就会在原位置留下一个空白元素
4.相对定位元素会将标准文档流中的元素压盖住
5.相对定位元素的定位值可以为负数
/*设置定位坐标*/
Lift: 100px;
注意:
/*相对定位属性*/Position: relative;
相对定位元素一般很少单独使用,主要是用来配合“绝对定位”元素来使用
案例:
/*使用属性选择器来匹配元素
*/
Input[type=”text”]{
Font-size:36px;
}
Input[type=”button”]{
Position: relative;
top:6px;
}