一般我们设置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. go语言从例子开始之Example8.数组

    在 Go 中,数组 是一个固定长度的数列. package main import "fmt" func main() { 这里我们创建了一个数组 a 来存放刚好 5 个 int. ...

  2. log4j.xml配置详解(转)

    转自:http://willow-na.iteye.com/blog/347340 Xml代码 <?xml version="1.0" encoding="UTF- ...

  3. mysql的一个工具 mysql-utilities

    mysql-utilities是mysql的一个工具集合,它是基于----- python2 --- 实现的,从官网查看到最新版本为mysql-utilities-1.6.5.tar.gz编译安装 w ...

  4. 使用node-static运行vue打包文件dist

    vue打包后的文件dist,如果想上线之前查看效果,方法如下: npm install -g node-static 进入到dist文件夹,运行static命令 打开上面地址

  5. jquery实现回车键登录/搜索等确认功能

    button按钮提交方式: $('#search').click(function() { get_table(); }); //keyCode=13是回车键,设置回车键提交 $("body ...

  6. CSS 的基础语法

    1.基础语法规则 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开. selector {property: val ...

  7. 整合SSH

    Hibernate知识: 1.核心配置文件: 连接数据库信息.连接池配置 映射配置 Struts2: 1.相关操作: 创建方式: 写一个类,写上public String execute():方法 实 ...

  8. PHP如何进行错误与异常处理（PHP7中的异常处理和之前版本异常处理的区别）

    PHP如何进行错误与异常处理(PHP7中的异常处理和之前版本异常处理的区别) 一.总结 一句话总结: throwable接口+Error类 在PHP7更新中有一条:更多的Error变为可捕获的Exce ...

  9. Losing session data in ASP.NET

    Losing session data in ASP.NET By default Response.Redirect terminates thread execution and there mi ...

  10. MySQL导入导出数据和表结构 source和mysqldump

    MySQL导入数据的方式: 1.使用source /dir/test.sql导入数据进入数据库:查询数据库编码格式show variables like "%char%";设置编码 ...