一般我们设置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. 浅谈Java反射与框架

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

  2. 理解CSV格式规范（解析CSV必备）

    什么是CSV逗号分隔值(Comma-Separated Values,CSV),其文件以纯文本形式存储表格数据(数字和文本),文件的每一行都是一个数据记录.每个记录由一个或多个字段组成,用逗号分隔.使 ...

  3. Scrapy爬虫框架的使用

    #_author:来童星#date:2019/12/24# Scrapy爬虫框架的使用#1.安装Twisted模块 https://www.lfd.uci.edu/~gohlke/pythonlibs ...

  4. Delphi ini文件结构简介

    一.INI文件的结构:; 注释[小节名]关键字=值 INI文件允许有多个小节,每个小节又允许有多个关键字, “=”后面是该关键字的值. 值的类型有三种:字符串.整型数值和布尔值.其中字符串存贮在INI ...

  5. 绝不划水队Alpha冲刺阶段博客目录

    绝不划水队Alpha冲刺阶段博客目录 一.Scrum Meeting 第六周会议记录 第七周会议记录 二.测试报告 alpha阶段测试报告 三.习得的软工原理/方法/技能? 李浩杰: (1)一开始分工 ...

  6. BZOJ 4555(第二类斯特林数+NTT)

    传送门 解题思路 数学题,推式子.求\(f(n)=\sum\limits_{i=0}^n\sum\limits_{j=0}^iS(i,j)2^jj!\) 首先可以把\(j\)往前提: \[f(n)=\ ...

  7. [CSP-S模拟测试]:影魔（树状数组+线段树合并）

    题目背景 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄.每一个灵魂,都有着自己 ...

  8. undefined null测试

    测试浏览器:chrome 当有父元素的子元素未定义时undefined和null均为true,类型为undefined 当元素赋给null后undefined和null均为true,类型为object ...

  9. 分布式系统理论基础6：Raft、Zab

    本文转自:https://www.cnblogs.com/bangerlee/p/5991417.html 本文转自 https://www.cnblogs.com/bangerlee/p/52684 ...

  10. （转）Spring Boot干货系列：（四）开发Web应用之Thymeleaf篇

    转:http://tengj.top/2017/03/13/springboot4/ 前言 Web开发是我们平时开发中至关重要的,这里就来介绍一下Spring Boot对Web开发的支持. 正文 Sp ...