一般我们设置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. linux---postgresql的用户角色权限

    PostgreSQL是通过角色来管理数据库访问权限的,我们可以将一个角色看成是一个数据库用户,或者一组数据库用户.角色可以拥有数据库对象,如表.索引,也可以把这些对象上的权限赋予其它角色,以控制哪些用 ...

  2. jQuery实现网页放大镜功能

    京东等电商网站中可以对商品进行放大观察,本文要实现的就是模仿这个放大镜功能,大致效果如下图所示: 简要说明实现思路: 1.原图窗口与放大窗口插入的是同一个图片,不过原图窗口的图片要适当缩小,放大窗口图 ...

  3. delphi三层DCOM架构

    DCOM架构: 服务端开发: 采用Delphi7+SQL2008 一.创建数据库和表 CREATE TABLE [dbo].[tb_Department]( [FKey] [uniqueidentif ...

  4. Freemarker模板和依赖

    <html> <head> <meta charset="utf-8"> <title>Freemarker入门小DEMO < ...

  5. 根据mysql数据库 定义solr Schema.xml中配置业务域

    <!--product--> <field name="product_name" type="text_ik" indexed=" ...

  6. 文本处理工具——sed基础

    一sed介绍 三剑客是grep,sed,awk,功能都很强大. 其中sed是Stream EDitor,流编辑器 行,编辑器的简写,它一次处理一行内容. sed的强大在于可以对文件进行修改,很适合在脚 ...

  7. JavaScript 六种继承方式

    title: JS的六种继承方式 date: 2017-06-27 05:55:49 tags: JS categories: 学习 --- 继承是面向对象编程中又一非常重要的概念,JavaScrip ...

  8. jdbc 事物

    package transaction; import jdbc.utils.*; import java.sql.Connection; import java.sql.PreparedStatem ...

  9. Service系统服务(四)：搭建单区域DNS服务器、特殊DNS解析、配置DNS子域授权、搭建并测试缓存DNS

    一.搭建单区域DNS服务器 目标: 本例要求要求为DNS区域tedu.cn搭建一台DNS服务器,以便用户能通过域名的方式访问网站.测试阶段主要提供以下正向记录: svr7.tedu.cn ---> ...

  10. 73、salesforce通过JAVA来Call在salesforce中已经写好的Restful处理接口

    /** *使用salesforce通过REST方式作为webservice,需要以下几点 *1.类和方法需要global,方法需要静态 *2.类需要通过RestResource(UrlMapping= ...