相对定位 | 学习笔记

简介: 快速学习相对定位。

开发者学堂课程【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;

}

相关文章
|
28天前
相对定位和绝对定位
相对定位和绝对定位。
37 10
|
25天前
清除浮动
清除浮动。
25 0
|
2月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
2月前
|
前端开发 UED 容器
深入理解定位布局:绝对定位与相对定位
深入理解定位布局:绝对定位与相对定位
|
4月前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
40 0
|
4月前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
53 0
|
5月前
|
前端开发 容器
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
|
前端开发
CSS 中相对定位(relative)与绝对定位(absolute)的详解
CSS 中相对定位(relative)与绝对定位(absolute)的详解
219 0
|
移动开发 前端开发
关于H5中的相对定位与绝对定位区别的思考
关于H5中的相对定位与绝对定位区别的思考
166 0
|
编解码 人工智能 前端开发
CSS中的绝对定位和相对定位
CSS中的绝对定位和相对定位