HTML+css基础入门学习教程之CSS 相对定位

置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

CSS 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}
	新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。			

如下图所示:

CSS 相对定位实例

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

1.以下关于相对定位说法正确的是

A相对定位指的是相对于浏览器窗体的左上角进行位置偏移

B相对定位的元素不会脱离标准文档流,所以会影响其它同级元素的定位

C相对定位是相对于元素自身的位置进行偏移

D相对定位是相对于父级容器进行位置偏移

发布了30 篇原创文章 · 获赞 3 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/htkms87/article/details/104641275