CSS的相对定位和绝对定位(position)

Stella981
• 阅读 538

什么是定位呢?

定位(position),故名思议,就是确定元素在页面中的位置。

CSS的常用定位有两种,一种是相对定位,一种是绝对定位。

下面我们看例子

  1. <html>

  2. <head>

  3. <style>

  4. #div0 {

  5. /* 设置背景色为黄色 */

  6. background-color:yellow;

  7. /* 设置边框为1px的线条 */

  8. border:1px solid;

  9. /* 设置宽度为800px */

  10. width:800px;

  11. }

  12. #div1, #div2 {

  13. /* 设置宽度为300px */

  14. width:300px;

  15. /* 设置高度为300px */

  16. height:300px;

  17. /* 设置边框为1px的线条 */

  18. border:1px solid;

  19. }

  20. #div1 {

  21. /* 设置背景色为灰色 */

  22. background-color:#888;

  23. }

  24. #div2 {

  25. /* 设置背景色为蓝色 */

  26. background-color:#08c;

  27. }

  28. </style>

  29. </head>

  30. <body>

  31. <div id="div0">

  32. <div id="div1"></div>

  33. <div id="div2"></div>

  34. </div>

  35. </body>

  36. </html>

有三个div,其中一个大的#div0,里面含有两个子div#div1#div2

CSS的相对定位和绝对定位(position)

可以看到,大的黄色#div0,嵌套了一个灰色的#div1和一个蓝色的#div2

由于div块级元素,所以灰色黄色div不会在同一排显示。


测试1,相对定位

这个时候,我们给#div1,设置相对定位

  1. #div1 {

  2. /* 设置背景色为灰色 */

  3. background-color:#888;

  4. /* 设置为相对定位 */

  5. position:relative;

  6. /* 设置相对于自己,上面向下移动20px,左侧向右移动30px */

  7. top:100px;

  8. left:150px;

  9. }

CSS的相对定位和绝对定位(position)

当我们给灰色的#div1做了相对定位之后,#div1相对于自己原来的位置做了移动。

但是其他的元素#div0#div2的位置都没有发生变化,也就是说,给元素做了相对定位之后,其他元素不受影响,还认为该元素,在其原来的位置。


测试2,一个子元素绝对定位,父元素无定位

我们再给#div1改成绝对定位

  1. #div1 {

  2. /* 设置背景色为灰色 */

  3. background-color:#888;

  4. /* 设置为绝对定位 */

  5. position:absolute;

  6. /* 相对于页面html,上面向下移动20px,左侧向右移动30px */

  7. top:100px;

  8. left:150px;

  9. }

CSS的相对定位和绝对定位(position)

这时发现,原来的黄色#div0坍塌了,这是因为,绝对定位,同样会产生类似于float的脱离文档流绝对定位的元素,与其他元素不在同一层面,处于其他元素的上方。

当父元素#div0无定位时候,绝对定位是相对于html文档来做的定位,与其父元素无关。


测试3,一个子元素绝对定位,父元素有定位

当我们给父div设置一个定位后(绝对定位/相对定位都可以),情况又发生了改变

  1. #div0 {
  2. position:relative;
  3. }

CSS的相对定位和绝对定位(position)

从图上可以清楚的看到,#div1的位置,相对于父元素#div0发生了偏移。

也就是说,当父元素有定位,绝对定位是相对于父元素来做的定位。

测试4,两个子元素绝对定位,父元素无定位

现在我们给蓝色的#div2也做一个绝对定位,再来看一下效果。

  1. #div2 {

  2. /* 设置背景色为蓝色 */

  3. background-color:#08c;

  4. /* 设置为绝对定位 */

  5. position:absolute;

  6. /* 相对于页面html,上面向下移动30px,左侧向右移动60px */

  7. top:30px;

  8. left:60px;

  9. }

CSS的相对定位和绝对定位(position)

现在两个子元素都设置了绝对定位,那么他们就都处于其他元素的上方,黄色的父div,就在坍塌的只剩下一条线了。

那么两个子div,重叠在一起,到底怎样控制,谁在谁的上面呢?

可以用z-index属性来控制。

我们给#div1加上z-index属性

  1. #div1 {

  2. /* ... 其他css代码 */

  3. /* 设置层级为1 */

  4. z-index:1;

  5. }

CSS的相对定位和绝对定位(position)

css中,用z-index来设置元素的层级,默认是0,谁的z-index大,谁就在上面

当给#div1设置z-index1后,#div2z-index是默认值0,#div1z-index#div2的大,那么#div1就在#div2的上方了。

同理,当你给一个元素的z-index设置为-1时,那么这个元素就会在文档下面,看不见了。

总结:

  1. 相对定位,是相对自己原来位置所做的定位,其他页面元素不受影响,还认为该元素,在其定位前的地方。
  2. 如果父元素没有定位,那么绝对定位,是相对于页面html做的定位。
  3. 如果父元素有定位,那么绝对定位,是相对于其父元素所做的定位。
  4. 定位的层级由z-index属性控制,默认是0,谁大谁在上方。
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
九路 九路
3年前
干货 | CSS中的四种定位有什么区别?
我们都知道,前端开发里面的CSS中常用的定位方式有普通定位,相对定位,绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什
Stella981 Stella981
2年前
Selenium 详解CSS定位
xpath定位是“屠龙刀”,那CSS定位就是"倚天剑了",相对xpath来说,具有语法简单,定位速度快等优点一、属性定位1、可以通过元素的id,class,tag标签这三个属性直接定位  表示id属性,如:kw.  表示class属性,如:.s\_ipt直接用标签名称,如:inpu
Stella981 Stella981
2年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Wesley13 Wesley13
2年前
CSS定位和滚动条
0805自我总结一.绝对定位position:absolute;/绝对定位:1、定位属性值:absolute2、在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度)3、一旦定位后,定位的布局方位top、bottom、left、right都能参与布局
Wesley13 Wesley13
2年前
CSS定位问题(3):相对定位,绝对定位
引子:开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕?看下面的html代码:XHTML12345<body<divid\"fatherbody"\<divclass\"item1"\</div</div</body
Wesley13 Wesley13
2年前
CSS定位中“父相子绝”
一、定位的介绍  定位有三种:相对定位(position:relative)、绝对定位(position:absolute)、固定定位(position:fixed)二、三种定位的用法,特点和实例2.1、相对定位  特性:不脱标、形影分离、老家留坑!(https://oscimg.oschina.net/oscnet/f3c139667c
Stella981 Stella981
2年前
RobotFramework自动化测试之元素定位
前言:最近在做基于RF框架的Web自动化测试,其中涉及到元素的定位,主要用到id、name、xpath、css四中定位方法,尤其后面的两种方法特别有效,可以解决大部分的定位问题。
Wesley13 Wesley13
2年前
CSS相对定位与绝对定位
CSS相对定位设置为相对定位的元素框会偏移某个距离。“相对于”元素仍然保持其未定位前的形状,它原本所占的空间仍保留!CSS相对定位实例(http://static.oschina.net/uploads/img/201312/01164555_uxZw.gif)注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来
Stella981 Stella981
2年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565