一般我们设置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（day7）--用户管理和权限管理简单介绍

    系统基础 计算机的三大部件 CPU 内存 IO 总线 一般使用system call和api来调用硬件 一些基础命令, pwd 查看当前路径 cal 计算器 clock 时钟 hwclock 显示与设 ...

  2. 2019牛客暑期多校训练营（第七场）E F H I

    E Find the median 题意:每次往序列中增加连续的[l,r]的数,每加入一次就询问当前序列的中位数. 解法:此题没有要求在线,那么直接离线+线段树+二分就可以了.求出每个端点之后排序得到 ...

  3. Vue2 实现时空穿梭框功能模块

    前言 这篇文章主要是分享一个时空穿梭框功能,也就是我们平时用的选择功能.勾选了的项就会进入到另一个框中. 时空穿梭框之旅 示例演示: 这个时空穿梭框实现了: 1.可以全选.反选 2.没有选中时,不可以 ...

  4. jquery 下拉框左右选择

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  5. 浅谈Java反射与框架

    Java反射 1.示例 1.用户类 package com.lf.entity; import com.lf.annotation.SetProperty; import com.lf.annotat ...

  6. 使用 sar 查看网卡的流量

    1.常用命令 sar -n DEV #查看当天从零点到当前时间的网卡流量信息 sar -n DEV 1 10 #每秒显示一次,共显示10次 sar -n DEV -f /var/log/sa/saxx ...

  7. json 文件打读取

    1.获取文件路径 /* * BookController.class.getClassLoader().getResource("static/json/book_nav.json" ...

  8. js 微信公众号网页用户授权，获取微信code，access_tocken,用户信息

    第一次做微信网页授权,过程有点艰难,主要是不知道redirect_uri的地址要怎么写,刚开始我以为就是授权结束后要跳转到的首页地址,于是写成了uri = 'http://18i194c049.ias ...

  9. CSP2019赛前小复习：

    虽然觉得复习也没有什么用,还不吃好睡好,保持好心情. SA: 坑就那几个. \(s[0]=s[n+1]=-1\). 和\(rank\)交换的\(tp\)数组的\(tp[n+1]=0\). 一般加上这两 ...

  10. LOJ 2552 「CTSC2018」假面——DP

    题目:https://loj.ac/problem/2552 70 分就是 f[i][j] 表示第 i 个人血量为 j 的概率.这部分是 O( n*Q ) 的:g[i][j][0/1] 表示询问的人中 ...