各个定位在文档流中的占位情况

最新推荐文章于 2023-05-20 17:09:24 发布
最新推荐文章于 2023-05-20 17:09:24 发布
阅读量482 收藏 1
点赞数 2
分类专栏： 大二软设问题集合 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/piaoliangj/article/details/113445858
版权

9.各个定位在文档流中的占位情况——软设总结系列

9.1定位的分类

  • 静态定位: static
  • 相对定位: relation
  • 绝对定位: absolute
  • 固定定位: fixed

9.2 各个定位的特点

  1. 静态定位：默认定位方式，按照标准流位置，没有边偏移。
  2. 相对定位：元素移动时是相对于它原来的位置来说的；原来在标准流的位置继续占有，后面盒子任然以标准流的方式对待它。
  3. 绝对定位：相对于最近的relation/absolute的父盒子移动；不占有原来的位置。
  4. 固定定位：元素固定于浏览器可视区的位置；不占有原先位置。

9.3 各个定位是否脱离标准流

定位脱离标准流与否
static否
relative否
absolute是
fixed是
律己以严
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于元素的定位详解
bangbanggangan的博客
07-10 655
    在Web前端中，元素的定位是必须掌握的，然后也是比较容易搞混淆的：positon包含以下值：1.absolute 绝对定位：相对位置为最近一级的非static定位的父元素；2.relative 相对定位：相对正常位置进行布局；3.fixed 固定定位：相对于浏览器窗口进行定位；4.static 没有定位：元素出现在正常的流中，absolute绝对定位：采用绝对定位，会脱离文档流，浮动起来，...
浮动与定位
Baiqicute的博客
11-21 500
1.浮动 (1)、标准流 这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。 html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。 前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？ CSS的定位机制有3种：普通流（标准流）、浮动和定位
定位后，下面的元素（跑上来）占了上面元素的位置怎么办？
weixin_42220130的博客
09-17 4004
<div class="box"> <div class="img"></div> <div class="title">标题文字</div> </div> //样式 .box{position: relative;} .img{width: 100%; height: 120PX; positio...
常见定位方案（三种文档流）
weixin_46100406的博客
01-08 1048
定位方案（文档流）是控制元素的布局，有三种常见方案: 1.普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 普通流其实就是指BFC中的FC 2....
css绝对定位、相对定位和文档流的那些事(非本人)
wanglin_ni_ge的博客
06-06 580
HTML是流式文档，所以HTML默认布局就是流式布局，这里所说的流式布局怎么理解呢？所谓了流式                   布局就是：所有元素（包括块级元素和非块级元素）将以流的形式依次从左到右、从上到下排列！        流式布局是重点，在知道流式布局的原理之后，还要专注某一个元素在流式布局中自我的表现，元素空间分为占用空间和物理空间，占用空间是指元素所占用的空间，物理空间是指元
web 定位
xuxu_77的博客
07-22 823
**注意：子元素设置绝对定位，父元素可以设置相对定位、绝对定位、固定定位， 这三种情况，参照元素都是父元素**
FreeMarker2.3.23官方中文文档
12-26
通过阅读和理解FreeMarker 2.3.23的官方中文文档，开发者能够熟练掌握FreeMarker的使用技巧，从而在Web应用开发中更加高效地创建和管理动态内容。这份文档详尽地涵盖了FreeMarker的各个方面，无论是初学者还是经验...
品牌定位方法.pptx
09-25
品牌定位是企业在市场竞争中赋予产品或服务的独特身份，旨在使消费者能够快速识别并记住品牌，进而形成偏好和忠诚度。以下是对品牌定位方法的详细解释： 1. **品牌定位流程**： - **品牌调研**：这是定位的第一步...
在Word2021中插入SmartArt图形.docx
09-27
4. **选择SmartArt图形**：在弹出的“选择SmartArt图形”对话框中（图2021061302所示），用户可以在左侧选择不同的类别（例如流程、层次结构等），并在右侧预览各个图形。选择一个合适的图形后，点击“确定”按钮。 ...
jacob以目录和段落分析读取Word文档（自己写的）
07-02
在IT行业中，尤其是在文档处理和自动化领域，Jacob库是一个非常重要的工具。Jacob是Java和COM（Component Object Model）之间的一个桥梁，它允许Java程序能够调用Microsoft Office的应用程序，如Word，来执行复杂的...
CSS定位
weixin_45544617的博客
03-31 409
一、定位 1.默认值 position:static; 无特殊定位，遵循html默认显示原则 2.绝对定位 position:absolute; 参照物：离它最近的具有定位属性的父包含块，如果找不到满足条件的父包含块，相对于浏览器窗口进行定位 注：我们通过left,right,top,bottom来确定元素定位的具体位置 3.相对定位 position:relative; 参照物：元素偏移前自身的位置 注：相对定位也通过left,right,top,bottom来决定元素偏移的位置 .
让css固定定位占据其位置
NanChen的博客
01-03 6497
通常固定定位是不具备占据位置的，如果想实现上下不滚动让中间滚动，可以在固定定位中再嵌套一层盒子设置一个固定高度即可 <div class="had"> <header class="header"> <h5>个人中心</h5> </header> .had{ height: 45px; width: 100%; } .header { width: 100%; height: 45px
固定定位
lilixingfu的专栏
03-31 439
将一个div固定在浏览器的一个位置，不随滚动而消失。则使用position:fixed;.sub-btn{ position: fixed; top:50px ; background-color: white;//设置为白色才可以使内容穿过此使div看不到 width: 100%; height: 50px; }若不设置background-color为白色
2021-08-23 4.5 文档流定位方式flow
zjj8008120308的博客
08-23 311
1.文档流定位方式，所有的元素从左到右，从上到下依次排列。对于每个元素来说，根据自己的不同分类，有自己的特征，有的元素独占一行，有的元素会跟其他元素排列在一行。那么元素的分类有三种类型 （1）block：独占一行，元素的height、width、margin、padding等属性都可以设定。常见的block类型的元素：div、p、h1…h6、ol、ul、table、form等。 （2）inline：不单独占一行，宽度够用的情况，所有inline类型的元素都在一行显示；width、height不可以设置；w
css-浮动，定位，溢出处理
Startpoupee的博客
03-18 344
浮动，定位
绝对定位absolute、相对定位relative（脱离文档流）
Shiny0815的博客
11-26 5788
1、脱离文档流，：父元素高度不再包含文档流高度 position：absolute 子元素 position：relative 父元素， 子元素相对于祖先中的第一个relative定位，用...
position定位，下列说法错误的是（ ）
KzhengKevin的博客
05-20 882
它的移动不会影响其他元素的布局，但是它在布局中仍然保留了原来的空间。B. absolute 的元素，如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。absolute 的元素，如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者relative，那么就会依据父容器进行偏移。D. 相对定位的元素以它原来的位置为基准偏移，在其移动后，原来的位置仍然占据空间。
css绝对定位、相对定位和文档流的那些事
weixin_30408165的博客
07-09 233
前言 接触html、和css时间也不短了，但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决，但总不是个事，所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系。 文档流的概念 确切的说应该是文档文档流模型的机制，html的布局机制就是用文档流模型的，即块元...
固定定位脱离文档流解决方法
最新发布
06-08
固定定位会脱离文档流，因此在使用固定定位时，需要注意其对页面布局的影响。如果需要解决固定定位脱离文档流的问题，可以使用以下两个方法： 1. 使用相对定位：将元素的 position 属性设置为 relative，这样元素就...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值