一般我们设置position: absolute都会一起设置left/right/top/bottom, 但是如果不设置, 布局会是什么样子的呢? 直接上图

1.一个大盒子中4个小盒子, 正常文档流布局(红色盒子等下设置position:absolute)

2. 将3号盒子设置position: absolute

可以看到, 3号盒子脱落了文档流, 4号盒子上来到了3号盒子原来的位置, 但是3号盒子还在之前文档流的位置, 向下偏移一点是因为margin的折叠效应, 脱离文档流后,3号盒子margin不会和2号盒子折叠, 所以向下移动了一段距离

position: absolute 如果不设置left, right, top, bottom会在什么位置的更多相关文章

  1. 关于position:absolute的困惑

    今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的positi ...

  2. 通过案例理解position:relative和position:absolute

    w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...

  3. CSS--position:relative和position:absolute

    position:relative相对定位 1. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认 ...

  4. CSS position:absolute浅析

    一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...

  5. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

  6. 父元素没有设置定位 position absolute 解析

    1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  7. 物体position:absolute后设置left:50%发生的有趣小事

    今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下 一 准备知识 ①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽 ...

  8. css position absolute相对于父元素的设置方式

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...

  9. css absolute同时设置top bottom

    css absolute同时设置top bottom 确定div的高度,若设置了左边框,那么这条边框的高度将随着父定位上下文高度的变大而变大 http://www.webfront-js.com/ar ...

随机推荐

  1. linux100day（day6）--shell脚本简单逻辑

    if语句: if条件语句的使用格式: 1.单分支语句 if 条件;then 执行语句 fi 2.双分支语句 if 条件;then 执行语句1 else 执行语句2 fi 3.多分支语句 if 条件;t ...

  2. PNG文件格式

    PNG文件的组成 一个PNG文件可以看作是由多个数据块(chunk)部分组成,如同积木一样,一个数据块就是一个小积木,不同类型的积木组合搭建成了我们的PNG图像. PNG图像至少由文件署名域和三个关键 ...

  3. eclipse maven install后查看报错信息

  4. 转载关于struts命名空间的一则报警

    今天花了点时间把struts2警告事件彻底的测试了一边,终于有点眉目了.希望能给其他人带来一点帮助.文章属于原创.并不需要转载的时候注明出处,而是希望转载的朋友一定要看明白本文内容再转载,因为我你都清 ...

  5. webpack （1）

    node_modules/.bin/webpack 用webpack 打包 因为我们没有全局安装webpack 所以要用到这条命令 创建html npm install --save-dev html ...

  6. cpanle/Apache 强制http跳转到https

    因为租的虚拟主机是使用Cpanel,按照网上找的文章,处理的步骤如下: 打开Cpanel面板-文件管理器-设置(在页面的右上角)-勾选显示隐藏文件(dotfiles)-save . 找到网站所在的目录 ...

  7. 【leetcode】640. Solve the Equation

    题目如下: 解题思路:本题的思路就是解析字符串,然后是小学时候学的解方程的思想,以"2x+3x-6x+1=x+2",先把左右两边的x项和非x项进行合并,得到"-x+1=x ...

  8. SpringBoot使用Swagger2搭建强大的RESTful API 文档功能

    swagger用于定义API文档. Swagger2的使用 Maven Plugin添加Swagger2相关jar包 <!--swagger2 start--> <dependenc ...

  9. padding 填充

    CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距. padding(填充) 当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背 ...

  10. 容器————priority_queue

    #include <queue> 与queue不同的是可以自定义其中数据的优先级,让优先级高的先出队列. 优先队列具有队列的所有特性,包括基本操作,只是在这基础上添加了内部的一个排序,它本 ...