-
2019-08-22 15:32:01
相对定位和绝对定位的区别是什么?
绝对定位的特性:
1、当子元素没有父容器时,子元素会依赖body进行定位
2、当父容器中嵌套了一个子元素,此时父容器没有设置定位属性,而子元素设置了定位属性,那么这个子元素会依赖浏览器进行定位,而不会依赖父容器。详见案例1
3、当父容器中嵌套了一个元素,此时父容器设置了定位属性,而子元素也设置了定位属性,那么这个元素会依赖于父容器进行定位。详见案例2案例1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位的特性</title> <style> /* 定位的特性: 父容器 */ #id-selector-dv-father { width: 300px; height: 300px; background-color: red; } #id-selector-dv-son { width: 100px; height: 100px; background-color: green; /*将子元素进行定位*/ position: absolute; /*并设置子元素距
更多相关内容 -
Web前端面试题第八道—绝对定位与相对定位
2021-06-14 06:53:20相对定位(relative):先说相对定位:跟它的名一样,相对嘛,要有一个参照物,但这个参照不是别的,是它自己在原来文档流中的位置。相对定位之后的对象并没有完全从文档流中脱离,这个对象原来在文档中的位置保留着...相对定位(relative):
先说相对定位:跟它的名一样,相对嘛,要有一个参照物,但这个参照不是别的,是它自己在原来文档流中的位置。相对定位之后的对象并没有完全从文档流中脱离,这个对象原来在文档中的位置保留着(站着茅坑不拉屎),偏移后的对象会把其它的层遮罩住。
将相对定位特征总结如下:
①相对定位的元素,在没有设置宽度的情况下,宽度是整个浏览器的宽度,或者是依赖于父元素的宽度。
②相对定位的块状元素相对于原来位置移动,移动后仍然占据文档流的位置,不影响其他元素的布局
下面通过代码进行验证
在浏览器中放置5个盒子,用不同的颜色来表示,代码如下
HTML代码
CSS代码
最初效果图
给第三个盒子设置相对定位
元素相对于原来位置偏移,宽高都没变,撑大了容器,还占据着原来在文档流中的位置,对其它元素的布局没有产生影响。
绝对定位(absolute):
被绝对定位的对象将从文档流中脱离,绝对定位的参照位置就不再是自己了,是哪个,就看它的上级或上上级有没有定位了,使用left,right,top, bottom等属性相对于其最接近的一个有相对或者绝对定位设置的父级对象进行绝对定位,如果父级没有设置定位属性,则会相对于html根元素进行定位,看了一些帖子发现有人认为如果父对象没有设置定位属性,则会相对于body进行定位,这个说法是不对的。
将绝对定位的特征总结如下:
①绝对定位的块状元素在没有设置宽度的情况下,宽度由元素里面的内容决定
②脱离后原来的位置相当于是空的,下面的元素会来占据位置
③绝对定位的对象相对于距离自己最近的设置了相对定位或者绝对定位的父对象进行定位
④如果父元素没有定位,则相对于html根元素定位
下边还是通过这五个盒子的偏移来验证
(1)块元素无偏移值
上边的5个盒子,只给box5一个绝对定位,无偏移值。此时块状元素只是漂浮在原来的位置,如果后边还有块状元素,将会占据他在文档流中的位置,我们在box5下边加上一个box6看一下效果。
说明:绝对定位的块状元素在没有定义宽度的情况下,宽度由元素里面的内容决定。
效果图如下
加一个box6的效果
从图中可以看出,box6已经占据了box5在文档流中的位置了。
(2)有偏移值
如果设置了偏移值而父元素没有设置相对定位或绝对定位的情况下,元素相对于根元素定位(即html元素,注意是相对于根元素,而不是相对于body)用box5的偏移来验证。
①给box5一个偏移量,父元素没有相对或者绝对定位
效果图如下
②给box5同样的偏移量,给body元素一个绝对定位(body元素设置为了absolute,绝对定位的块状元素的宽度由最长p决定,宽度变小了):
效果图如下
图片发自App
从上边的两张效果图明显发现相对于根元素的定位与相对于body的定位是不相同的,主要的区别在于有没有算进去body的margin值。
下面在五个盒子外边再嵌套三个父盒子,并给这三个父盒子一个定位,来验证是否是根据最近定位的父元素进行偏移。
代码如下
HTML代码
CSS代码
效果图
图片发自App
从上边很明显看的出来box5是相对于第三层容器也就是离它最近的容器进行的定位。有兴趣的可以试一试,把第三层容器的定位去掉,看看是不是就相对于第二层容器定位了,我已经验证过,就不放图了。
有同学会问,为什么要把最外层的盒子设置为绝对定位,其它两个设置为相对定位,这个定位的方法区别主要影响的是盒子的宽度,相对定位的块元素在没有设置宽度的情况下,它的宽度就是默认的浏览器的宽度,有父元素的情况下,则它的宽度由父元素决定,如果这个块元素的内容过多,则会把父元素也撑大。
,也就是说相对定位的块元素的宽度依赖于父元素,那么如果把这三个容器都设置为绝对定位会有什么效果呢,先来看一看效果图
图片发自App
从图中可以看出,第三层容器的宽度已经不再依赖于父元素,因为它从文档流中脱离出来了,他自己是独立的,而他的宽度只能由内容来决定。总结起来就是,绝对定位的块元素宽度由自己的内容决定,相对定位的块元素在没有设定宽度时,默认就是浏览器的宽度。但是不管宽度怎样,绝对定位的元素都会找到离自己最近定位(绝对或者相对定位)的父元素来进行定位。
总结:
relative:定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了relative的元素仍然处在文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。
absolute:定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对或相对定位,则元素相对于根元素即html元素定位。设置了absolute的元素脱离了文档流,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据位置。
说明:本文的实验结果是在父元素及子元素没有设置固定宽度的情况下得来的,如果父元素设置了固定的宽度,他的子元素无论是绝对定位还是相对定位的子元素都不能超过其父元素的宽度,父元素是老大哥,谁都不能超过他。
-
WEB前端基础——绝对定位、相对定位
2021-03-27 19:05:11相对定位 相对位置,是指相对于盒子在原本定位体系下的位置 将盒子的position属性设置为relative,以启用相对位置 盒子启用相对位置,起始位置为元素本身位置的左上角,移动后会保留盒子的本身的位置,下面的常规流...相对定位
相对位置,是指相对于盒子在原本定位体系下的位置
将盒子的position属性设置为relative,以启用相对位置
盒子启用相对位置,起始位置为元素本身位置的左上角,移动后会保留盒子的本身的位置,下面的常规流盒子不会移动。
视口
浏览器的可视 窗口
绝对定位
概述
-
当浮动元素被设置为绝对定位
属于绝对定位,float属性被强制设置为none
-
绝对定位元素对其他元素的影响
绝对定位元素不会对其他任何元素造成任何影响
-
绝对定位元素的位置
可通过left、top、right、bottom来设置(都可以设置负值)
固定位置
position:fixed;
元素的包含块:视口;(即:移动的起始位置为视口的左上角)
偏移量的设置(移动)
起始位置是视口的左上角
适用场景:
pc端:页面头部
移动端:footer
以下五个情况的元素,推荐为aside
1.AD(广告)
2.侧边栏
3.目录
4.回到顶部
5.即时通讯
绝对位置
position:absolute;
寻找包含块:包含我,离我最近元素的position值不等于static。
适用场景:2个及以上的标签需要重叠在一起的时候
-
-
WEB学习 -相对定位、绝对定位、固定定位、z-index
2018-10-31 10:50:00相对定位 相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。 2、不脱标,老家留坑,形影分离 也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘...- 相对定位
-
相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。
-
2、不脱标,老家留坑,形影分离 也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。 3、相对定位用途 相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用: 1) 微调元素 2) 做绝对定位的参考,子绝父相(讲绝对定位的时候说) 4、相对定位的定位值 可以用left、right来描述盒子右、左的移动; 可以用top、bottom来描述盒子的下、上的移动。
- 绝对定位
-
1、 绝对定位脱标 绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。 绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了: 2、参考点 绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角: 如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角:
绝对定位的儿子,无视参考的那个盒子的padding。 绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。如果想让盒子居中,就用 left:50%; margin-left:负的宽度的一半。
- 固定定位
-
固定定位,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。 固定定位脱标! IE6不兼容。
- z-index
-
● z-index值表示谁压着谁。数值大的压盖住数值小的。 ● 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。 ● z-index值没有单位,就是一个正整数。默认的z-index值是0。 ● 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。 ● 从父现象:父亲怂了,儿子再牛逼也没用。
-
web前端入门到实战:css绝对定位和相对定位、固定定位
2019-09-23 20:52:031、绝对定位 position:absolute; 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果... -
Web前端.DAY6-6-相对定位.avi
2022-05-16 20:44:58Web前端.DAY6-6-相对定位.avi -
Web前端基础知识:CSS盒子模型、绝对定位和相对定位
2019-03-17 10:18:43二:绝对定位和相对定位 绝对定位(absolute)的概念 :如果设置它的偏移量,将会影响其他元素的位置。如下图(图来自百度)  设置绝对定位时,元素会相对于离自己最近的设置了绝对定位的父元素进行... -
绝对定位和相对定位有什么区别?
2020-09-14 14:29:55绝对定位和相对定位的区别 一、主bai体不同 1、相对定位:是设置为相对定位的元素框会偏移某个距离。 2、绝对定位:absolute 脱离文档流,通过 top,bottom,left,right 定位。 二、特点不同 1、相对定位:在使用相对... -
css中的怎么设置相对定位?
2021-06-12 00:55:22设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。css中的怎么设置相对定位?想要设置相对定位,需要在元素中使用position属性,将其值设置为relative,即position: ... -
CSS 元素的定位之相对定位 position: relative
2018-02-21 22:06:19定位在CSS中,通过 position属性来对元素进行定位,...要对页面元素使用定位技术,必须 position属性设置为 static 之外的其它 3 个属性值,即相对定位、绝对定位、固定定位。相对定位当一个元素的 position属性设置... -
web基础 相对路径与绝对路径 html图像标签和路径
2022-03-27 20:01:46绝对路径和相对路径的使用方法,使用绝对路径的弊端,图片的网络绝对路径 -
Web自动化之页面元素定位---Xpath
2022-03-26 20:26:10Web自动化之页面元素定位--Xpath定位方法详解 -
web自动化测试元素定位方法
2020-09-08 20:28:50通过某些方式定位到我们要执行的对象、目标(Target) 对这个对象进行什么操作(command) 通过操作对定位到的元素赋值(value) 添加断言操作 二、首先要解决的是元素定位问题,这个内容分开来讲就是何为页面元素?... -
设置了相对定位relative之后,改变top值,如何去掉多余空白?
2019-08-12 15:54:54众所周知,relative和absolute有一个区别在于relative是相对自身定位,而absolute是相对于最近的定位父级定位,而此时的相对定位经过top值改变其在文档流中的位置之后,自身本来的位置依然在文档流中占据位置。... -
position定位 relative(相对定位)、 absolute(绝对定位)、fixed(固定位置)、 static 等
2021-03-16 01:02:08position的值包括 relative(相对定位)、 absolute(绝对定位)、fixed(固定位置)、 static 等 一、相对定位: relative(相对定位) 如果对一个元素进行相对定位,它将出现在它所在的位置上,通过设置垂直或水平... -
Selenium 4相对定位器如何改变您的测试方式?
2020-06-15 21:59:24Selenium自动化测试中的Web定位器用于对页面的Web元素执行不同的操作。 毫不奇怪,作为新的Selenium用户,我们要学习的第一件事是Selenium Locators。 这些定位器是任何Selenium自动化测试框架的基础,无论您进行... -
web前端定位的经验
2017-11-07 20:34:35web前端定位的经验 移动端 基本上用geolocation 就可以,定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。 -
【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)
2015-05-29 23:01:191.相对定位 有了以上的定义,来看一段代码: <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Document title > < style type = "text/css" > ... -
web自动化笔记一:元素定位的八种方式
2022-01-19 11:44:13web自动化学习笔记(一) 八种元素定位方法 -
web页面常用布局:定位,可以使盒子自由移动位置或固定位置
2020-09-19 00:04:59定位 = 定位模式 + 边偏移;决定元素的最终位置。 定位模式: static:是默认值,在文档流中就是这个... 如果有祖先元素使用了定位,就会相对第一个(从内到外)使用了定位的祖先元素定位 边偏移:top,left,r. -
修复IE下相对容器中绝对定位Bug
2018-02-26 21:56:37相对容器中绝对定位Bug在页面布局中,将绝对定位的元素嵌套在相对定位的容器中,是一种很常见的布局。假设有两个元素,#outter 为父元素,#inner 为子元素:<div id="outter"> <div... -
Web自动化八大元素定位
2019-11-10 17:30:59使用Chrome打开百度代码: from selenium import webdriver driver=webdriver.Chrome...1、ID定位 可以根据元素的id来定位属性,id是当前整个HTML页面中唯一的,所以可以通过id属性来唯一定位一个元素,是首选的元... -
Web自动化测试面试题.docx
2020-03-28 16:55:28Selenium保证元素成功率是通过元素的定位...当然如果开发人员开发不规范,我们在定位元素的时候尽量使用相对地址定位,这样能减少元素定位受页面变化的影响。只要我们元素定位准确,就能保证我的每一个操作符合我的预期 -
CSS中几种控制页面布局的定位机制(相对定位与绝对定位)
2017-07-13 22:17:23CSS中几种控制页面布局的定位机制对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑...CSS中包含三种控制页面布局的定位机制:普通流、相对定位、绝对定位。在CSS中通过position属性表明定位机制。此外还可 -
div布局:相对定位、绝对定位、固定定位
2016-07-07 21:02:28当用div布局,相对定位时,子div的位置是相对于母div来设置的(从母div左上角开始算),margin可以活动到母div外围而不会把母div撑大,padding则总是在母div内部折腾,会把母div撑大。——————————————... -
web页面元素的8种定位方法
2019-04-18 11:57:00一、web页面元素定位工具介绍 1、打开google浏览器,按F12进入开发者模式,如下图: 2、用鼠标点击下图红色框中的箭头——然后鼠标移动到web页面的元素上(此处为百度框),会自动定位到对应的html代码,如下图... -
Web前端学习笔记07:CSS_高级技巧_定位
2021-08-13 14:34:11定位详解 3.1 边偏移 3.2 定位模式 (position) 3.2.1 静态定位(static) - 了解 3.2.1 相对定位(relative) - 重要 3.2.3 绝对定位(absolute) - 重要 定位口诀 —— 子绝父相 3.2.4 固定定位(fixed) - 重要 4.... -
css子元素相对父元素进行定位的实现
2021-06-12 05:00:15relative 生成相对定位的元素,相对于其正常位置进行定位。 我们知道,要使用相对于父元素的定位,肯定要使用absolute,为什么直接使用absolute不起作用?因为使用absolute相对于父元素定位,对父元素有一个要求,... -
Css中关于定位的理解,相对定位、绝对定位、浮动定位
2015-11-15 19:31:07定位分为三种,绝对定位、相对定位、浮动定位。绝对定位会使同级元素重新从(0,0)坐标开始定位。相对定位会考虑同级元素产生的位置影响。浮动定位时,如果有滚动条,元素位置不受滚动条的影响。 有些情况下必须... -
Web自动化之元素定位
2018-07-31 22:20:13慕课网学习笔记:web端功能自动化定位元素 用CSS选择器定位元素 基本语法: tag[attribute='value'] 同时使用两个属性定位元素: tag[attribute1='value1'][attribute2='value2'] 例:button[type='submit']...