文档流指元素在文档中的位置由元素在html里的位置决定，块级元素独占一行，自上而下排列；内联元素从左到右排列
脱离文档流的方式：

  • 浮动，通过设置float属性
  • 绝对定位，通过设置position:absolute
  • 固定定位，通过设置position:fixed

定位

1  relative，relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。它的主要效果是使元素偏离正常的位置，其他元素不会调整位置来弥补其偏离后留下来的空隙。其与 absolute 不同，其偏离对于父元素的定位方式没有要求，且始终占位，不脱离文档流

2 absolute ，绝对定位是脱离文档流的，元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框

绝对定位脱离了文档流，所以会出现覆盖情况

absolute, relative, fixed偏移的参考点分别是什么？

  • absolute参考点是离其最近设置了fixed、relative的父级（祖先）元素，如果父级元素没有，则一层一层往上找，最终到body元素
  • relative的参考点是其原来自身的位置
  • fixed的参考点是浏览器的窗口

Z-index

因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
z-index只有在使用了定位属性即positon的元素上才可使用；有较高z-index值的元素比z-index值较低的元素离读者更近；z-index值是正负整数

设置了z-index效果

文档流&浮动&定位的更多相关文章

  1. CSS脱离文档流&浮动

    什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...

  2. day 41 标准文档流 浮动

    一.标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 标准文档 ...

  3. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  4. 前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  5. 4、前端--浮动、定位、是否脱离文档流、溢出属性、z-index、透明度、JavaScript简介

    浮动 # ps:html代码时没有缩进一说的 全部写在一行也可以 """浮动主要就是用于页面布局的!!!""" # 浮动带来的负面影响 &q ...

  6. 一天搞定CSS： 浮动（float）及文档流--10

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  7. 内联元素的盒子模型与文档流定位padding属性

            内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px}   与     span{width:100 ...

  8. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  9. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

随机推荐

  1. PHP防止SQL注入攻击和XSS攻击

    代码如下: /** * 防SQL注入和XSS攻击 * @param $arr */ function SafeFilter (&$arr) { $ra=Array('/([\x00-\x08, ...

  2. testNG 注释实例

    1. 单个测试用例文件 新建TestDBConnection.java文件 import org.testng.annotations.*; public class TestDBConnection ...

  3. tcp、udp协议栈

    tcp struct tcphdr { __be16 source; //源端口 __be16 dest; //目的端口 __be32 seq; //序列号 __be32 ack_seq; //确认号 ...

  4. tcp校验和

    伪首部(pseudo header),通常指TCP伪首部和UDP伪首部 TCP的校验和是必需的,而UDP的校验和是可选的 TCP校验是需要校验包头和数据的 //共12字节 typedef struct ...

  5. <choose><when><if>

    --说明:choose类似于switch,其中的when如果不符合则进入otherwise(类似于default),可以结合if标签使用. -- <select> -- SELECT * ...

  6. linux档案和目录管理（后续）

    资料来自鸟哥的linux私房菜 四:档案和目录的预设权限和隐藏权限 umask:预设权限,相比与chomd的4,2,1权限,档案满分为666,目录满分为777,umask可以预设消除部分权限,比如一个 ...

  7. springboot2.1.3+jacoco检测代码覆盖率

    关于 jacoco的介绍,不在本文中详细描述,简单点说,只是个代码覆盖率工具,想要了解具体的可以参考如下地址: https://www.jianshu.com/p/639e51c76544 好了,闲话 ...

  8. MySQL/MariaDB数据库的索引工作原理和优化

    MySQL/MariaDB数据库的索引工作原理和优化 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 实际工作中索引这个技术是影响服务器性能一个非常重要的指标,因此我们得花时间去了 ...

  9. linux命令提示符上色

    vi /etc/profile RED='\[\e[31;1m\]' Yello='\[\e[33;1m\]' Green='\[\e[32;1m\]' End='\[\e[0m\]' Pur='\[ ...

  10. Justice(HDU6557+2018年吉林站+二进制）

    题目链接 传送门 题意 给你\(n\)个数,每个数表示\(\frac{1}{2^{a_i}}\),要你把这\(n\)个数分为两堆,使得每堆的和都大于等于\(\frac{1}{2}\). 思路 首先我们 ...