`

css的定位与文档流

    博客分类:
  • css
阅读更多
      谈到CSS的定位机制时都会提到一个关键词“文档流”。那么什么是文档流呢?将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流

       CSS的定位机制有3种:普通流、浮动(float:left/right/none)和定位 (position:static/relative/absolute/)

       普通流中的元素的位置由元素在 (X)HTML 中的位置决定。浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。 详见:http://www.w3school.com.cn/css/css_positioning.asp


        基于文档流, 我们可以很容易理解以下的定位模式:

相对定位relative:相对于元素在文档流中位置进行偏移. 但保留原占位。相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
绝对定位absolute:完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移。
固定定位static:完全脱离文档流, 相对于视区进行偏移。
绝对定位fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。


position的absolute与fixed共同点与不同点:
A:共同点:
1.改变行内元素的呈现方式,display被置为block;2.让元素脱离普通流,不占据空间;3.默认会覆盖到非定位元素上
B不同点:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。

分享到:
评论

相关推荐

    详解css定位与定位应用

    ### 详解CSS定位与定位应用 #### CSS定位概述 定位技术是Web开发中不可或缺的一部分,尤其是在页面布局的设计过程中。良好的定位技巧能够帮助开发者构建出既美观又实用的网站界面。CSS提供了多种定位方式,包括...

    基于文档流解读html元素的(css)定位形式

    在探讨HTML元素的CSS定位之前,我们先来了解一下文档流的概念。文档流是指页面元素根据其默认布局规则自然地从上到下、从左到右排列的过程。这种布局方式遵循一定的顺序性,即元素按照其在HTML文档中的出现顺序依次...

    CSS文档流与块级元素,css

    ### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中,**文档流**是一个核心概念,它指的是HTML文档中元素的自然流动方式。想象一下,网页就像一条河流,其中的元素就像河中的船只,顺流而下,...

    css定位绝对相对定位

    ### CSS定位详解:绝对定位与相对定位 #### 相对定位(Relative Positioning) 相对定位是一种常见的CSS定位方式,它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...

    css2.0 css2 帮助文档

    CSS2.0提供了三种定位机制:正常流(normal flow)、浮动(floating)和绝对定位(absolute positioning)。 1. 正常流:元素按其在HTML文档中的顺序自上而下、自左向右排列。 2. 浮动:元素可以设置浮动,使其脱离...

    CSS+Js定位与相对定位

    CSS定位主要包括静态定位、相对定位、绝对定位、固定定位和粘性定位。其中,相对定位是基础,它允许元素相对于其原始位置进行偏移,但不会改变文档流。相对定位的CSS代码通常写作: ```css .element { position: ...

    文档流 div+css

    ### 文档流(div+css)详解 #### 一、文档流概述 文档流是指网页元素在HTML文档中按照一定的规则自动排列的过程。这些规则决定了元素如何在页面上自上而下、从左到右地布局。理解文档流是掌握CSS布局的基础。 **...

    CSS2.0帮助文档

    2. 浮动(float):浮动元素会脱离正常文档流,向左或向右移动,直到碰到容器边缘或另一个浮动元素。 3. 定位(position):通过`position`属性,元素可以被固定、绝对定位或相对定位,实现更精确的布局控制。 4. 颜色和...

    css2.0帮助文档

    CSS2.0引入了浮动(float)和定位(position)机制,使得元素可以相对于其正常流进行定位。浮动元素可以左右移动并影响周围元素的布局,而定位则可以通过`position`属性(如`static`, `relative`, `absolute`, `fixed`)...

    前端css定位.pdf

    总的来说,CSS定位技术为前端布局提供了强大的控制能力,可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式(标准流、浮动、定位)中的应用,对于前端开发者来说至关重要。在网页布局中,定位通常是在...

    html+css定位练习

    总的来说,HTML+CSS定位是网页设计中的关键技能,熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集,希望你能深入理解定位的概念,提升你的网页设计能力。记得多实践、多尝试,理论与实践相结合才能...

    css图片定位

    绝对定位使元素脱离正常文档流,根据最近的非静态定位祖先元素进行定位。固定定位相对于浏览器窗口定位,即使滚动页面,元素位置仍保持不变。最后,粘性定位结合了相对和固定定位的特点,在页面滚动到特定位置时变为...

    CSS-zeal官方文档

    - **搜索与查看**:讲解如何在Zeal中快速找到所需的CSS知识点,并详细阅读相关文档。 - **更新与同步**:说明如何保持Zeal中的文档与最新官方文档同步。 通过这个“CSS-Zeal官方文档”,开发者可以全面了解和掌握...

    中文版CSS帮助文档

    1. **静态定位**:默认定位方式,元素遵循正常文档流。 2. **相对定位**:`position: relative;`,元素相对于其正常位置移动。 3. **绝对定位**:`position: absolute;`,元素相对于最近的非静态定位祖先元素定位。 ...

    CSS 2.1(中英文)官方文档

    - 静态定位:元素遵循正常文档流。 - 相对定位:元素相对于其正常位置移动,不影响其他元素。 - 绝对定位:元素相对于最近的非静态定位祖先元素定位,如果无此类祖先,则相对于初始包含块(通常为浏览器窗口)。 ...

    zeal离线文档---CSS.tgz

    - **定位(positioning)**:包括静态、相对、绝对和固定定位,控制元素相对于其正常流位置或父元素的位置。 - **弹性布局(Flexbox)**:一种现代的布局模式,用于创建灵活、响应式的布局,适应不同屏幕大小和设备...

    CSS定位.pdf

    CSS定位是网页设计中至关重要的一个概念,它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式,分别是默认定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。 1. **...

    CSS2.0DOC文档

    1. **选择器与声明**: CSS2.0中的选择器用于定位HTML或XML文档中的元素,如`h1`代表一级标题,`#id`表示ID为特定值的元素,`.class`表示类名为特定值的元素。声明则包含属性和值,如`color: red;`用于设置文本颜色。...

Global site tag (gtag.js) - Google Analytics