脱离文档流

最新推荐文章于 2024-12-23 14:13:46 发布
最新推荐文章于 2024-12-23 14:13:46 发布
阅读量340 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bujiongdan/article/details/84256711
本文讲解了如何使用CSS的position属性使div元素脱离文档流，实现动画效果。通过设置position为absolute，结合top、left、right、bottom属性，可以使div元素在页面上自由移动。同时，需要将div的父级元素的position属性设置为relative，以确保绝对定位的参照。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

div要移动，添加动画，要脱离本来的文档流

把div脱离文档里：

+position:absolute;

top:10px;

left:10px;

right:10px;

bottom:10px;

 

div的父级元素里：

+position:relative

 

因为，正常div是排队的。

bujiongdan
关注
脱离文档流的方法&&CSS浮动产生的负面影响及解决办法
qq_42204313的博客
09-13 7277
https://blog.youkuaiyun.com/theLostLamb/article/details/79581984 一、什么是文档流？ 将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。 这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。   二、什么是脱离文档流？ 元素脱离文档流之后，将不...
CSS盒子浮动——脱离文档流、高度塌陷、文字环绕
最新发布
2401_89406454的博客
05-26 1231
盒子浮动、脱离文档流、浮动带来的影响（高度塌陷、文字环绕）
脱离文档流的方法
weixin_48723546的博客
07-05 5703
脱离文档流的常用方法和position属性的可选值
脱离文档流的三种方法
icbjhbcjkbda的博客
10-16 6398
HTML元素脱离文档流
重绘 重排(回流) 脱离文档流(脱标)
m0_75085583的博客
12-23 321
例如，在一个父元素 position: relative 的容器中，子元素设置 position: absolute，可以通过 top、bottom、left、right 属性来精确控制子元素在父元素中的位置。当DOM的结构发生变化（如元素的添加、删除、位置改变等），浏览器需要重新计算各元素的几何属性（位置和大小），这个过程就叫回流。例如，改变一个盒子的背景颜色，就会触发重绘。是指当元素的外观（如颜色、背景色、边框等）发生改变，但不影响它在文档流中的位置和尺寸时，浏览器对该元素进行重新绘制的过程。
文档流，脱离文档流的方式
weixin_43765747的博客
06-27 385
文档流：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。 脱离文档流： 脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来。 float浮动。 position的absolute和fixed定位。 ...
定位脱离文档流
Yang_54188的博客
02-22 433
body下包含着两个兄弟元素，都给它们定位后会脱离文档流，导致Body高度塌陷并且处在底层的元素下部内容显示不完全，这个时候可以给底层元素设置position:absolute;bottom:0;top:100px;
脱离文档流和恢复文档流的方法
qq_40992225的博客
08-24 630
元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
脱离文档流和半脱离文档流（详解）
程麒阁的博客
07-20 3265
脱离文档流 脱离文档流是指，该元素脱离了文档中。不再占据默认分配的空间，它下面的元素会上去补位。 可以理解为脱离文档流的元素离开了它的座位，后面的同学可以坐前面，坐它的位置。 但是一般来说脱离文档流分为两种 全脱离文档 半脱离文档 脱离状态 区别 全脱离 补位元素中无论是有图片还是文字，都会全部上去补位 半脱离 补位元素中有文字和图片的，图片，文字会卡在元素周围，形成环绕效果 代码演示 半脱离文档流 半脱离文档流，遇到文字图片时候，补位元素会卡住，形成环绕效果 css .box1
【脱离文档流的三种方法】
Clover ‘s Blog
01-03 934
脱离文档流的三种方法
css中脱离文档流是什么意思
yzt02012的博客
09-14 933
1、脱离文档流:就不占据空间了？ 是的，一个元素脱离文档流后，其他的元素在定位时候回当做没看见他，两者位置重叠都是可以的。 2、脱离文档流不是从dom树中脱离，用浏览器的审查元素可以看到脱离文档流的元素，依然会出现在dom树里 3、实质：  脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档
脱离文档流，position与z-inex的关系
baibaider的博客
04-07 2578
文档流：从上至下，从左至右的布局符合html中标签本身含义的布局，比如某些标签独占一行，有些标签属于行内元素等。脱离文档流：将元素从普通文档流中去掉，其他元素在排版的时候会当作这个元素不存在去排版。什么会导致元素脱离文档流：float：脱离文档流，但其他的元素文字会找到该元素的文字位置。position:absolute：脱离文档流，其他元素完全无视该元素。它的定位取决于它的父元素有没有定位（po...
css中脱离文档流的理解
halze_eyes的博客
01-11 2353
上次去面试一家公司，那家公司的技术总监问我什么叫脱离文档流，当时我一下愣住了，这个是作为一个前端工作者在工作中经常会遇到的问题，我们频繁地用着，然而却不能用语言表达出它的意思。我不由得思考为什么会这样，如果下次有人问我同样的问题，我又将如何作答呢？ 首先从“脱离文档流”这几个字可以看出，它是在脱离开来的，其他元素的布局排版不被影响，对于其他元素来说它就是不存在的。 css中的绝对定位（abso
CSS文档流以及脱离文档流的方法
m0_74742670的博客
09-22 1284
脱离文档流之后，元素相当于在页面上增加了一个浮层来放置内容，此时可以理解为由两层页面，底层是原页面，上层是脱离文档流的页面。注意： 设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。设置元素的堆叠顺序，拥有跟高堆叠顺序的元素总是处于堆叠顺数较低的元素前面。当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动。float属性定义了元素浮动的方向，任何元素都可以浮动。浮动元素会造成父元素高度塌陷，后续元素会受到影响。
HTML中是否脱离文档流
qq_27381193的博客
12-03 2140
我们在显示隐藏元素的时候经常会用到把display设置为none，设置为none效果很明显，就是让元素脱离文档流，不显示，不占文档空间。 定位： inhert:规定从父元素继承position属性的值。 static：默认值，没有定位，元素出现在正常的流中。 relative:无论元素是否移动，元素在文档流中占据原来空间，只是表现会改变。 absolute:绝对定位使元素的位
脱离文档流html。
04-19
### HTML 脰离文档流的概念及实现 #### 概念说明 HTML 中的文档流是指网页布局按照默认顺序排列的方式。元素在文档流中会遵循从上到下、从左到右的原则依次排列[^1]。当某些 CSS 属性应用到特定元素时，这些元素可能会脱离文档流，这意味着它们不再占据原本的位置，也不会影响其他元素的布局。 #### 实现方法 以下是几种常见的使元素脱离文档流的方法： 1. **通过 `float` 属性** 使用 `float` 可以让元素向左或向右移动，并允许周围的文本或其他内容环绕它。尽管浮动的元素部分脱离了文档流，但它仍会影响父容器的高度计算[^2]。 示例代码如下： ```css .floated-element { float: left; width: 100px; height: 100px; background-color: yellow; } ``` 2. **通过 `position: absolute` 或 `position: fixed`** 设置 `position: absolute` 的元素将相对于最近的已定位祖先元素进行定位；如果没有这样的祖先，则相对于初始包含块（通常是视口）。而 `position: fixed` 则始终相对于浏览器窗口固定位置[^3]。这两种方式都会完全脱离文档流。 示例代码如下： ```css .absolutely-positioned { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: green; } .fixed-positioned { position: fixed; bottom: 20px; right: 20px; width: 80px; height: 80px; background-color: blue; } ``` 3. **通过 `display: none`** 将某个元素的 `display` 属性设为 `none` 同样会使该元素脱离文档流，不过这种方式不仅隐藏了元素本身，还清除了它的占位空间[^4]。 示例代码如下： ```css .hidden-element { display: none; } ``` 需要注意的是，一旦元素脱离文档流，其与其他未脱离文档流元素之间的交互关系会发生变化。例如，水平居中操作可能需要额外考虑脱离后的特殊情况处理[^5]。 ### 总结 综上所述，可以通过多种手段令 HTML 元素脱离文档流，每种技术都有各自的特点和适用场景，在实际开发过程中应根据具体需求合理选用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值