CSS相对定位与绝对定位

Wesley13
• 阅读 641

CSS 相对定位

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

CSS相对定位与绝对定位

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

CSS 绝对定位

设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

CSS相对定位与绝对定位

区别

绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位****不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

点赞
收藏
评论区
推荐文章
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
菜园前端 菜园前端
1年前
你需要知道的CSS基础样式知识
原文链接:定位相关相对定位css.mycontentposition:relative;绝对定位css.mycontentposition:absolute;left:0;top:0;固定定位css.mycontentposition:fixed;left
Stella981 Stella981
3年前
Selenium 详解CSS定位
xpath定位是“屠龙刀”,那CSS定位就是"倚天剑了",相对xpath来说,具有语法简单,定位速度快等优点一、属性定位1、可以通过元素的id,class,tag标签这三个属性直接定位  表示id属性,如:kw.  表示class属性,如:.s\_ipt直接用标签名称,如:inpu
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Wesley13 Wesley13
3年前
CSS中的绝对定位与相对定位
层级关系为:<div———————————position:relative;不是最近的祖先定位元素,不是参照物<div—————————没有设置为定位元素,不是参照物<div———————position:relative参照物<divbox1<divbox2——–position:absolu
Wesley13 Wesley13
3年前
CSS定位问题(3):相对定位,绝对定位
引子:开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕?看下面的html代码:XHTML12345<body<divid\"fatherbody"\<divclass\"item1"\</div</div</body
Stella981 Stella981
3年前
RobotFramework自动化测试之元素定位
前言:最近在做基于RF框架的Web自动化测试,其中涉及到元素的定位,主要用到id、name、xpath、css四中定位方法,尤其后面的两种方法特别有效,可以解决大部分的定位问题。
Wesley13 Wesley13
3年前
CSS内容布局
网页是由不同内容块构成的:标题、段落、链接、列表、图片、视频,等等。1.定位定位并不适合总体布局,因为它会把元素拉出页面的正常流。元素的初始定位方式为静态定位(static),即块级元素垂直堆叠。把元素设置为相对定位(relative),然后可以相对于其原始位置控制该元素的偏移量,同时又不影响其周围的元
Stella981 Stella981
3年前
CSS的相对定位和绝对定位(position)
什么是定位呢?定位(position),故名思议,就是确定元素在页面中的位置。CSS的常用定位有两种,一种是相对定位,一种是绝对定位。下面我们看例子1.<html2.<head3.<style4.div0{5./设置背景色为黄色/6.backgrou
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565