absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。...而相对定位的布局是不会影响文档流布局的。假设我想要使用相对定位对绿色的div进行偏移，那么就是根据绿色div的文档流布局的位置进行相对偏移的。 ? 假设想要达到上图的偏移效果，该怎么做呢？ ?...> absolute绝对定位示例 absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到...在上面相对定位的示例中，元素相对定位是基于文档流原来的位置进行偏移定位的。那么，绝对定位是基于什么的呢？ 将刚才关于设置相对定位的代码改为绝对定位看看。 ?...定位元素层级 z-index 定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级。 为什么需要元素的层级呢？
先来了解一下block元素和inline元素在文档流中的排列方式。 block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。...脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 只有绝对定位absolute和浮动float才会脱离文档流。 ...相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...（3）绝对定位 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...另外要注意：仅使用margin属性布局绝对定位元素的情况 此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。
由块级元素（块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行）和行级元素（块级元素特点： 在同一行内显示，不会改变HTML文档结构 ）组成。...2.元素仍处于文档流中，这也就意味着它会占据标准文档流的空间。...2.完全脱离了标准文档流，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。...3.当元素设置为绝对定位后，元素也会 多出两类属性：偏移量属性 和 Z-index属性，与相对定位不同的是： 该元素已经脱离了标准文档流（不占位） 建立的定位基准不是该元素的原来位置，而是分两种情况...>自适应宽度的列（因为绝对定位的元素会导致父元素高度塌陷，所以一定要保证固定宽度列的高度>自适应宽度的列，才能让绝对定位元素放进父容器里）
1.什么是浮动 首先我们需要知道定位 元素在页面中的位置就是定位，解决问题之前我们先来了解下几种定位方式 1、普通流定位 static（默认方式） 普通流定位，又称为文档流定位，是页面元素的默认定位方式...：relative 配合着 偏移属性(top/right/bottom/left)实现位置的改变 4、绝对定位 absolute 如果元素被设置为绝对定位的话，将具备以下几个特征 1、脱离文档流...1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位 2、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 3、...由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。...容易掌握 简单易懂 弊端：会添加许多无意义的空标签，有违结构与表现的分离，不便于后期的维护 方案3 设置父元素浮动 优势：简单，代码量少，没有结构和语义化问题 弊端：对后续元素会有影响
间距变为20px，这时候margin已经不重叠了 五.浮动/定位对其他元素物理空间的影响 这首先要提到我们经常挂在耳边的一个词——“脱离文档流” 脱离文档流 == 不占据元素的空间（物理上） .div2...其中float,position:absolute/fixed能够脱离文档流 ，而position:relative不能够脱离文档流 在这里，我们把脱离文档流的那一部分元素归为“浮动流”，而把没有脱离文档流的那一部分元素归为...3.浮动流本身并不会影响标准流元素的定位,但是却影响着标准流文本的定位 如果我们仔细看一下五中开头的demo会发现一个难以忍受的bug: ?..."div4"这个文本不是被包裹在div4这个元素里面吗，为什么被浮动元素div2“怼”下来了？刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗？对啊，这里说的是元素，并不是文本。...【实现思路】：正如上面所说，浮动会脱离文档流从而不占据其他元素的物理位置,而我们让div1向左浮动了，这表示我们在考虑div2的布局的时候完全可以把div1当作不存在。
定位方案的三种流 普通流：包括对块级框的块格式，对行级框的行格式，对块级框和行级框的相对定位； 浮动：在浮动模型中，一个框先按照正常排版来摆放，再将它从排版流中取出并尽可能地向左或向右偏移，其它内容可以排在一个浮动的周围...； 绝对定位：在绝对定位模型中，一个框会从排版流中完全脱离出来（它对后续的兄弟没有影响），并相对其包含块来指定其位置（包括 absolute, fixed ）。...简单来说，BFC建立了一个隔离的空间，隔断空间内外元素的相互作用，内部元素相互影响并按正常的布局来排列，同时BFC作为一个块级元素在其所在的文档流中被处理。...BFC创建条件： 根元素或其它包含它的元素； 浮动（float不为 none)； 绝对定位元素（absolute或fixed)； 行内块 inline-blocks 表格单元格 display: table-cell...浮动的特性 浮动框可以左右浮动， 直到它的外边缘遇到包含框或者另一个浮动框的边缘； 浮动框脱离了文档的常规流，文档的常规流会忽略浮动框的存在； 浮动框不会影响到块级框的布局，但影响内联框的排列 ； 当浮动框高度超过包含框的时候
绝对定位 相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。...因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。...固定定位 fixed属性了，应用fixed也叫固定定位，固定定位是绝对定位的中，固定定位的元素也不包含在普通文档流中。...�下面看几个例子： 不浮动 �红块向右移动 红块向左移动，绿块被覆盖 都向左浮动，父元素宽度为0 卡住的情况 行框和清理 前面指出浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素...,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。
流 CSS 中，有一个隐形的基本定位和布局机制，那便是 “流”。 在网络上，随便搜索一篇 CSS 教程，基本都会提到 “普通流” 和 “文档流”，还有 “文本流” 这些关键词，有时候经常会弄混淆他们。...所谓的文档流，实际就是普通流，在 W3C 的规范中并没有 “document flow”，只有 “nomal flow”，之所以出现普通流和文档流，很可能是早期对英文文档的不同翻译而造成的混淆。...正是由于 “块级元素” 具有换行特性，因此理论上它都可以配合 clear 属性来清除浮动带来的影响。 点击 内联元素：inline element 与块级元素负责结构不同，内联元素负责内容。...只要经过一定的实践，我们都会发现对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。 4.3 为何父级没有具体高度值的时候，height: 100% 会无效呢？...使用绝对定位时，需要注意绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的。
在网页布局的世界里，CSS定位是构建页面结构不可或缺的一环。四种基本的定位类型——static、relative、absolute、fixed，每种都有其独特的应用场景和行为特点。...1. static定位 概述：static是元素的默认定位方式，意味着元素按照正常的文档流排列，不会受到top, bottom, left, right属性的影响。...2. relative定位 概述：relative定位让元素保持在文档流中的位置，但可以通过偏移量（top, bottom, left, right）调整位置，不影响其他元素布局。...3. absolute定位 概述：absolute定位使元素完全脱离文档流，依据最近的一个非static定位祖先元素（或body）进行定位。...常见问题： 定位基准：忘记或误解绝对定位的参照物，导致元素出现在意料之外的位置。 覆盖问题：绝对定位元素容易覆盖其他内容，未适当调整z-index。
然后会看到"绝对定位和浮动定位能脱离文档流"，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolute positioning和Float的内容，却怎么也找不到...Document flow(文档流)的资料。...当我们采用绝对定位或浮动定位时，就没有必要再讨论IFC和BFC了。那么说绝对定位和浮动定位会让元素产生新的BFC又是怎么说呢？ 我是这样理解的。...首先绝对定位和浮动定位必须产生新的BFC，就想根元素会产生默认的BFC那样，供采用常规流的块级子孙盒子使用。...其实我有个疑问：那就是为什么一个文档可以有多个BFC，却只有一个IFC呢？
CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。...浮动(Floats) 左浮动元素尽量靠左、靠上，右浮动同理 这导致常规流环绕在它的周边，除非设置 clear 属性 浮动元素不会影响块级元素的布局 但浮动元素会影响行内元素的布局，让其围绕在自己周围，...绝对定位(Absolute positioning) 绝对定位方案，盒从常规流中被移除，不影响常规流的布局； 它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；...如果元素的属性position为absolute或fixed，它是绝对定位元素； 对于position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute...这里问题来了： 我们知道设置position和float会让元素脱离文档流并且又创建新的BFC，所以两个元素就不是相邻元素了，因此可以阻止相邻元素margin合并，但是inline-block、inline-flex
下面是主要知识点： 一、float浮动 1、块元素在一行显示 2、内联元素支持宽高 3、默认内容撑开宽度 4、脱离文档流 5、提升层级半层 二、clear清除浮动 1、加高（扩展性不好） 给浮动元素的父级设置同样的高度...normal) 四、position定位 相对定位（relative） 1、不影响元素本身的特性 2、不使元素脱离文档流（元素移动之后原始位置会保留） 3、如果没有定位偏移量，对元素本身没有任何影响 4...、提升层级 绝对定位（absolute） 1、使元素完全脱离文档流 2、使内嵌支持宽高 3、块属性内容撑开宽度 4、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移 5、...相对定位一般都是配合绝对定位元素使用 6、提升层级 一般来说，父级相对定位，子级绝对定位。...固定定位（fixed） 1、固定右下角 position:fixed; right:0; bottom:0; 与绝对定位特性基本一致。始终相对整个文档进行定位；IE6不支持固定定位。
三、清除浮动 1、清除浮动的原因： 1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局 2、... 不脱离文档流 1.1.3 如果没有定位偏移量，对元素本身没有任何影响 1.1.4 提升层级 1.2... absolute 绝对定位 1.2.1 使元素完全脱离文档流 1.2.2 使内嵌支持宽高-----absolute...三、清除浮动 1、清除浮动的原因： 1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局 2、... 不脱离文档流 1.1.3 如果没有定位偏移量，对元素本身没有任何影响 1.1.4 提升层级 1.2
而margin-top为负值的时候,不会增加高度,而是会让元素上移. margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度....文档流的影响 那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化的。...总结，不脱离文档流不使用float的话，负margin元素是不会破坏页面的文档流 对浮动影响 负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面 上面的问题，就是由于这个原因产生的 解决方案...：让设置负边距的元素，脱离文档流。...或者让受影响的元素不浮动，不脱离文档流 对定位影响 对于绝对定位的元素,设置了margin负值之后,会根据它定位的位置进行再位移。
，而不论该元素本身是什么类型，相对定位元素会相对于它在正常流中的默认位置偏移 注释：IE6 不支持该属性，IE7 开始支持 值 描述 static 默认值，没有定位，元素使用正常的布局行为，即元素在文档流中当前的布局位置... 从运行结果可以知道，向左移动的元素已经超出了浏览器窗口的显示范围了，定位元素所在的位置需要通过 left,top,right 以及 bottom 属性进行规定，偏移时不会影响文档流中的任何元素...，则一直回溯到 body 元素，元素的偏移位置不影响文档流中的任何元素，其 margin 不与其他任何 margin 折叠 元素设置 position:absolute; 绝对定位之后，脱离文档流，不占据文档流的空间位置...，行元素可以设置宽高，块元素宽度由 100% 变为 auto，脱离文档流，不占据文档流的空间位置，不会影响其他元素的布局 body { background-color: coral; height... 设置了 position: relative 的元素依然在文档流中，依旧占据空间位置，只不过可以通过设置 left,right 等属性来移动元素，这种移动是会影响其他元素的位置的
但这里需要注意一点，虽然浮动元素会造成重叠的现象，但这只是正常的文档流的元素盒子被浮动元素压住了，但文档流元素的文本内容会自动围绕在浮动元素周围，就像上图中块级元素四个字并没有被覆盖住。...也就是说，浮动元素并不会造成文档流的内容被覆盖的情况，反而它会影响到它之后文档流中元素的内容区域的显示排版。如果不想让后面的元素受到浮动元素的影响，那么就要进行浮动清除处理。...应用场景： 微调 让后代元素可以使用绝对定位 通常都是用来给后代使用绝对定位的，因为固定定位和绝对定位都会导致该元素从文档流中脱离，就像浮动元素那样，不再占用文档流的坑位。...而相对定位并不会，所以通常父类元素设置了相对定位，而让后代元素使用绝对定位，这样可以让后代元素可以脱离文档流，达到压盖的效果，同时还可以受限于父类元素的范围管控。...因为绝对定位是将元素脱离出标准文档流，那么绝对定位的元素显示与否，并不会影响到原本的文档流元素，所以，通常一些弹窗框，弹窗控制面板，可在页面上任意拖放的元素等都会通过绝对定位来做。
1 文档流 要了解css的布局，就要先了解什么是文档流。文档流就是HTML元素的一种排列规则。 而正常文档流就是在不用样式控制之下，html元素的默认排版方式。...2-2 文字环绕浮动 虽然浮动元素脱离了文档流，但并不是不对正常流文档元素产生影响。...与其他正常文档流不产生效果 2-3 清除浮动 嗯？为什么还要清除浮动？直接不浮动就行了啊？...3 定位布局 这也是脱离文档流的一种方式，它通过显式的设置定位坐标及大小来实现 3-1 position:fixed 这个比较简单，是相对于浏览器而言，导航栏通常就这么用；直接脱离文档流，别的元素将会无视它并且挤上来...3-3 position:absolute 绝对定位，也是直接脱离文档流，别的元素将会无视它并且挤上来 3-4 position:static 默认定位，也是每一个元素的初始定位，也就是正常文档流
例如平时的弹窗、黑色蒙版层、返回顶部、微博等网站顶部的导航条~~~ 相对定位和绝对定位是否会让元素脱离文档 当对一个元素设置了position:absolute和position:fixed时，会让该元素脱离文档流...如果元素设置了position:relative，根据W3C官方文档上来说，并不会脱离文档流，也不会有布局上的问题，但是在实际开发中的情况则是：元素不会脱离文档流，但是是可以设置top、left等值进行操作...设置绝对定位的元素，会脱离文档流，如下例子 HTML5学堂 - H5course - 绝对定位会脱离文档流 <link...元素设置position:absolute时，针对哪个元素定位 设置属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。
CSS中有三种基本的定位机制：普通流，浮动和绝对定位。...2.绝对定位：absolute 相对定位实际上依然是存在文档流中，但绝对定位则会使元素脱离文档流，绝对定位的元素是相对于距离他最近得已定位的祖先元素确定的，如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块的...浮动同样会使元素脱离文档流。 ? ? 上面说浮动会使元素脱离文档流，文档流中的元素会将其当做不存在，实际上并非如此。当下一个元素存在文本内容时，文本内容会受到浮动元素的影响，会移动留出空间，实际上。...解决办法通常有三种： 1.添加一个新的div空元素在news里面，并对其设置clear属性，浏览器会自动赋予外边距。如图： 缺点：添加无意义的元素。 ...2.也可以对父元素添加overflow:hidden属性，该属性会自动清理包含的任何浮动元素。 缺点：可能会对原来的布局有所影响，例如增加滚动条或截断内容。 3.使用js代码动态控制。
position: 指定一个元素在文档中的定位方式，top，right，bottom和 left 属性则决定了该元素的最终位置。...值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。...center的div需要放到后面，将左右两边使用absolute定位，因为绝对定位使其脱离文档流，最后面的center会显示在正常文档流中，然后设置margin属性，留出左右两边的宽度。...需要放到后面，对左右使用float:left和float：right，float使左右两个元素脱离文档流，中间的正常文档流中，然后设置margin属性，留出左右两边的宽度。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
