CSS-position 属性

CSS 定位机制

CSS 有三种基本的定位机制:普通流、浮动(float)和绝对定位(position)。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

标准文档流的概念

标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。HTML文档中的元素可以分为两大类:行内元素和块级元素。

  1. 行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域,从左到右排列。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。
  2. 块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。

CSS position 属性

通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。

position 属性值的含义:

  • static(默认值)

    元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

  • relative

    元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

    (相对于原来本身的位置通过top,bottom,left,right 定位,并且可以通过z-index进行层次分级。)

  • absolute

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

    (通过 top,bottom,left,right 定位,定位的起始位置为最近的父元素(postion不为static),否则为Body坐标原点,可以通过z-index进行层次分级。)

  • fixed

    元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

    (固定定位,脱离文档流,相对于浏览器窗口进行定位,在拖拽页面滚动条时,该元素不会随其一起滚动,可以通过z-index进行层次分级。)

FAQ:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

元素脱离文档流引发父级边框塌陷问题

如果使用position:absolute和position:fixed都会导致元素脱离文档流,由此就会产生相应的问题:子元素脱离文档流,父元素无法被撑开。

解决方法:

  • 将父级边框的高度height写成一个固定的高度。
  • 增加一个空的div标签, 清除浮动。设置样式。
clear: both;
  • 父类增加一个伪类
.demo:after{
content: '';
display: block;
clear: both;
}
  • 设置overflow属性
overflow: scroll;

CSS-position 属性&元素脱离文档流引发父级边框塌陷问题的更多相关文章

  1. css中哪些属性会脱离文档流

    一共有三个属性会使元素脱离文档流: (1)浮动 (2)绝对定位 (3)固定定位 元素脱离文档流会导致父元素高度塌陷,要修复高度塌陷问题,可以将子元素与父元素放在同一个BFC中

  2. HTML元素脱离文档流的三种方法

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

  3. float的元素脱离文档流,但不完全脱离,只是提升了半层;

    float的元素脱离文档流,但不完全脱离,只是提升了半层:

  4. 关于css浮动框是否脱离文档流的分析

    在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...

  5. 子元素position:absolute定位之后脱离文档流,怎么使子元素撑开父元素

    纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...

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

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

  7. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  8. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  9. CSS脱离文档流&浮动

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

随机推荐

  1. CSDN-markdown编辑器使用方法

    这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一 ...

  2. 响应式网站css reset

    响应式网站 css reset /* core.css v1.1 | MIT License | corecss.io */ html { font-family: sans-serif; font- ...

  3. qtp学习入门

    qtp的学习,初始入门是简单的,推荐田艳琴的<QTP从实践到精通>这边书,看过后,一周就可以入门,并能够自行编写脚本,但是想要进入更深一层,则需要更广阔的知识!这条路任重道远,你我共勉

  4. 海量数据架构下如何保证Mycat的高可用?

    写在前面 在<冰河,能讲讲Mycat如何实现MySQL的读写分离吗?>一文中,我们实现了使用Mycat实现MySQL的读写分离.然而,此时的Mycat只有一个节点,如果Mycat节点宕机了 ...

  5. 【C++】C++ new和malloc到底哪里不一样

    作者:李春港 出处:https://www.cnblogs.com/lcgbk/p/14118782.html 目录 一.前言 二.new和malloc两者的区别 2.1 属性的区别 2.2 使用上的 ...

  6. STL——容器(Map & multimap)的查找

    map.find(key);   //查找键key是否存在,若存在,返回该键的元素的迭代器:若不存在,返回map.end(); map.count(key);   //返回容器中键值为key的对组个数 ...

  7. 一文搞懂Java引用拷贝、浅拷贝、深拷贝

    微信搜一搜 「bigsai」 专注于Java和数据结构与算法的铁铁 文章收录在github/bigsai-algorithm 在开发.刷题.面试中,我们可能会遇到将一个对象的属性赋值到另一个对象的情况 ...

  8. [日常摸鱼]bzoj1470[noi2002]Savage

    晚上做到的一个扩欧的水题(?) wa了好几发感觉自己药丸-重新推了一遍公式才发现自己打错了orz 借此复习一下扩欧吧-orz 题目:http://www.lydsy.com/JudgeOnline/p ...

  9. [日常摸鱼][POI2000]病毒-Tire图(AC自动机)+dfs

    https://www.luogu.org/problemnew/show/P2444 (没有bzoj权限号T_T) 字符串题对我这种傻逼来说真是太难了x 题意:输入$n$个01组成的模式串串,判断是 ...

  10. 1-解决java Scanner出现 java.util.NoSuchElementException

    起因:在函数中新建scanner对象,然后多次调用此方法出现上述异常 原因:Scanner(system.in)在Scanner中接受的是键盘 输入,当调用close()方法时 Scanner的关闭会 ...