CSS教程】【Web前端基础】css相对定位的使用条件是什么

2020-12-11 11:20发布

8条回答

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

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

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

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

CSS的相对定位和绝对定位
通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效,比如你设置一个距离左边距偏移100px的声明:left:100px 那么这条声明不会起到任何效果。还有z-index属性在这时也不会生效。
也就是说我们平时如果不给某元素一个position属性的声明,那么它默认的就是我上述的这种情况,不过因为有了浮动,所以通常情况下我们还真不需要给元素设置position属性!
但是某些特殊的情况下,我们不得不用到position属性,那我们今天就讲讲position属性的relative和absolute值
首先说relative ,相对定位。
怎么理解呢?如果说我对某元素设置了相对定位,那么首先这个元素他会跟其它的元素一样,出现在文档流中它该出现的位置,然后,我们可以设置它的水平或垂直偏移量,让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意, 在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间。这里值得注意的一点是:偏移可不是边距,跟边距是不一样的。
天天
4楼 · 2020-12-12 09:17

第一,不管是什么,既然要定位,就需要有一个参照物

相对定位的参照物是本身。

绝对定位的参照物就是父级元素,当父级元素中不存在相对定位,那么它的参照物就是body

第二,产生的影响

相对定位,设置后,原来的位置始终保留着

绝对定位,设置后,原来的位置会被后面的内容占据


我是大脸猫
5楼 · 2020-12-12 10:43

根据我个人经验

在实际制作中,relative很少被用到同辈元素当中


一般用到最多的地方是用relative将元素定位,方便其内部的元素进行布局


举个例子:


如果这里的父元素的position不是relative的话,里边的2个div将会跑到整个的页面的左上和右下角


类似的应用还有页面元素的拖拽


至于第二个问题,没有一个绝对的答案,完全看你的页面构成和你的布局习惯,虽然都是单列多行,有的人喜欢直接div依次排开,有的人也喜欢绝对布局,有的人就是喜欢向左浮动,但是他们写出来的页面布局可能是完全一样的


灰机带翅膀
6楼 · 2020-12-13 17:40

有时候我们使用的相对定位时会达不到一定的效果。
只要记住:父级使用position:relative和子级position:absolute配合使用,这就是所谓的相对定位。

20200921文 - 做更棒的自己!
7楼 · 2020-12-14 17:07

首先外围大的div用一个相对定位。
然后FF和IE都用绝对定位就可以重叠了。
然后左边距设置一下left:0;
顶边距也设置一下top:0;

cc收获啦
8楼 · 2020-12-21 19:39

在实际制作中,relative很少被用到同辈元素当中


一般用到最多的地方是用relative将元素定位,方便其内部的元素进行布局


举个例子:


如果这里的父元素的position不是relative的话,里边的2个div将会跑到整个的页面的左上和右下角


类似的应用还有页面元素的拖拽


至于第二个问题,没有一个绝对的答案,完全看你的页面构成和你的布局习惯,虽然都是单列多行,有的人喜欢直接div依次排开,有的人也喜欢绝对布局,有的人就是喜欢向左浮动,但是他们写出来的页面布局可能是完全一样的


722
9楼 · 2021-02-22 14:38

CSS的相对定位和绝对定位
通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效,比如你设置一个距离左边距偏移100px的声明:left:100px 那么这条声明不会起到任何效果。还有z-index属性在这时也不会生效。
也就是说我们平时如果不给某元素一个position属性的声明,那么它默认的就是我上述的这种情况,不过因为有了浮动,所以通常情况下我们还真不需要给元素设置position属性!
但是某些特殊的情况下,我们不得不用到position属性,那我们今天就讲讲position属性的relative和absolute值
首先说relative ,相对定位。
怎么理解呢?如果说我对某元素设置了相对定位,那么首先这个元素他会跟其它的元素一样,出现在文档流中它该出现的位置,然后,我们可以设置它的水平或垂直偏移量,让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意, 在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间。这里值得注意的一点是:偏移可不是边距,跟边距是不一样的。

相关问题推荐

  • 回答 11

    一、position 的四个值:static、relative、absolute、fixed。绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative默认值:static二、relative定位与absolute定位的区别实例:HTML代码:css代码:初始效果:1、relative:相对于原来位置移动,元素...

  • 回答 14

    1.static:正常文档定位,此时top,bottom,left和z-index属性无效,块级元素从上往下纵向排布,行级元素从左往右排列2.relative: 相对定位,此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移,来确定元素位置,比如一个绝...

  • 回答 15

    浮动和定位都可以使元素脱离标准文档流,提升层级,  浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容...

  • 回答 7

    绝对定位就是你的位置已经不属于你了,你只能漂浮在半空中。相对定位就是你的位置你还占用的,人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的,都找不到的话就以body窗口来定位。...

  • 回答 17

    定位:1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容

  • 回答 5

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...

  • 回答 7

    引言:这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。一、何为BFC       BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的...

  • 回答 8

    同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]

  • 回答 9

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...

  • 回答 12

    BFC 是 Block Formatting Context(块级格式化上下文)的缩写,它是为了解决如下问题:浮动定位外边距合并清除浮动自适应多栏布局

  • 回答 9

    一、何为BFC       BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件      1、浮动元素,float 除 none 以外的值;       2、定位元素,p...

  • 回答 12

    css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear,官方定义如下: 语法: clear : none | left | right | both 取值: none : 默认值。

  • 回答 11

    float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边...

  • 回答 11

    如果不定义浮动的话,各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left,那么这个div就会出现在上层div下最靠左的位置,而与它同一等级,但列在它后面的div就会显示在他的右侧了。同样,如果定义了float:right,那么这个div就会出现在...

  • 回答 6

    1、 元素类型的转换(display属性)Display属性属性值:BlockInlineNone大部分块状元素默认的display的值为block,其中li默认的值 list-item(列表元素)大部分内联元素默认的display值为inline,其中input默认的值为:inline-block;(行内块元素);内联元素...

没有解决我的问题,去提问