CSS相对定位与绝对定位

CSS 相对定位

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

CSS 相对定位实例

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

CSS 绝对定位

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

CSS 绝对定位实例

区别

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

点赞
收藏

评论区

加载中...

相关推荐

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

你需要知道的CSS基础样式知识

原文链接:定位相关相对定位css.mycontentposition:relative;绝对定位css.mycontentposition:absolute;left:0;top:0;固定定位css.mycontentposition:fixed;left

Selenium 详解CSS定位

xpath定位是“屠龙刀”,那CSS定位就是"倚天剑了",相对xpath来说,具有语法简单,定位速度快等优点一、属性定位1、可以通过元素的id,class,tag标签这三个属性直接定位  表示id属性,如:kw.  表示class属性,如:.s\_ipt直接用标签名称,如:inpu

Python+Selenium自动化篇

本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''

CSS中的绝对定位与相对定位

层级关系为:<div———————————position:relative;不是最近的祖先定位元素,不是参照物<div—————————没有设置为定位元素,不是参照物<div———————position:relative参照物<divbox1<divbox2——–position:absolu

CSS定位问题(3):相对定位,绝对定位

引子:开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕?看下面的html代码:XHTML12345<body<divid\"fatherbody"\<divclass\"item1"\</div</div</body

CSS相对定位与绝对定位 - HelloWorld