当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。
而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。
一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。
文章出处：标准之路(http://www.aa25.cn)
分享到：
相关推荐
本文主要探讨CSS如何实现网页的分栏布局，重点集中在绝对定位和浮动这两种方法。 1. **绝对定位** 绝对定位是一种强大的布局工具，它允许开发者精确控制元素的位置，不受其他元素影响。在CSS中，有四种定位选项：`...
总之，绝对定位和浮动定位是CSS布局中的重要工具，它们各有优势，开发者应根据具体需求灵活运用，以构建出高效且美观的网页布局。同时，理解这两种定位方式的工作原理，能帮助开发者更好地解决布局问题，提升网站的...
【深入理解CSS布局之定位与浮动】 在CSS布局中，定位和浮动是两...同时，随着CSS Flexbox和Grid布局的发展，浮动和绝对定位在某些场景下可能被替代，但仍需掌握这些基础概念，因为它们在某些特定布局中仍然不可或缺。
2. **定位（Positioning）**：包括相对定位、绝对定位和固定定位，可以精确控制元素的位置，其中相对定位是基于元素本身的位置，而绝对定位则基于最近的非静态定位祖先元素。 3. **背景图像（Background Image）**：...
HTML 和 CSS 是构建网页设计的基础，本项目主要运用了 Flex 布局和绝对定位这两种强大的CSS技术。Flex布局（Flexible Box），又称弹性盒布局，是现代网页布局的首选方式，它极大地简化了多行多列元素的排列，特别是...
3. **绝对定位**（Absolute Positioning）：元素从文档流中脱离，不占用空间，位置相对于最近的已定位祖先元素，如果没有定位的祖先，则相对于初始包含块。`position`属性设置为`absolute`，可以通过`z-index`控制...
但浮动元素和绝对定位元素不会触发外边距合并。以前，开发者常用padding、border或者overflow属性来解决外边距合并的问题，而现在可以利用定位属性来避免该问题。 总的来说，CSS定位技术为前端布局提供了强大的控制...
通过设置元素的绝对定位，我们可以使其脱离文档流，并根据相对于最近的非静态定位祖先元素进行定位。如果没有这样的祖先，它将相对于初始包含块（通常是浏览器窗口）定位。 3. **固定定位**：在某些情况下，如果...
只有相对定位(`relative`)、绝对定位(`absolute`)和固定定位(`fixed`)的元素才能设置`z-index`。 在实际应用中，浮动和定位经常结合使用，例如在创建响应式布局时，小屏幕设备可能更适合使用定位，而在大屏幕设备上...
总的来说，这个综合案例1展示了如何巧妙地运用CSS的浮动和定位属性来构建复杂的网页布局。通过相对定位保持整体结构的灵活性，通过绝对定位确保各个元素的精确对齐，最终创造出具有独特视觉效果的画册式网页。学习和...
CSS的定位主要有三种方式：静态定位（static）、相对定位（relative）和绝对定位（absolute），以及我们关注的固定定位（fixed）。默认情况下，元素都是静态定位，按照正常的文档流排列。相对定位允许元素相对于其...
本文将深入探讨CSS中的四个关键概念：块模型、文档流、定位（相对定位和绝对定位）以及浮动和清除模型。 首先，让我们来看看CSS中的块模型。在CSS中，有一些HTML元素如`div`、`table`、`p`和`ul`被视作块元素，它们...
总之，理解和解决IE浏览器中的绝对定位问题需要对CSS布局有深入的了解，特别是浮动和绝对定位的交互、z-index的运用以及IE的特定兼容性问题。通过合理地调整布局结构，设置正确的定位属性和z-index，可以有效地避免...
1. 当绝对定位层的邻近浮动层的宽度不等于父层宽度，且没有清除浮动时，IE6/7和Firefox显示一致。 2. 如果邻近浮动层的宽度不等于父层宽度，但有清除浮动，IE6/7不显示绝对定位层，而Firefox显示。 3. 当邻近浮动层...
CSS提供了多种定位方式，包括普通流、浮动以及绝对定位等，每种方式都有其特定的应用场景。 #### CSS Position属性详解 `position` 属性用于指定元素的定位类型，主要有以下几种： - **Static**：这是默认值，...
2. 绝对定位元素：当元素的`position`属性为`absolute`或`fixed`时。 3. 行内块元素：当元素的`display`属性设置为`inline-block`时。 4. 表格单元格：当元素的`display`属性设置为`table-cell`时。 5. 表格标题：当...
1. **绝对定位**：通过`position: absolute;`属性，元素可以相对于最近的非static定位祖先元素进行定位，若不存在则相对于body定位。此属性使得元素可以从正常的文档流中移除，可以自由移动而不影响其他元素布局。 ...
常用的定位属性有`static`（默认值）、`relative`（相对定位）、`absolute`（绝对定位）和`fixed`（固定定位）。例如，要创建一个浮动在其他元素上方的层，可以将元素的`position`设置为`absolute`或`fixed`，并调整...
1. **绝对定位**：在CSS中，`position: absolute;`可以使元素脱离正常文档流，并根据其最近的非静态定位祖先元素进行定位。这对于使QQ图标在页面任何位置浮动至关重要。 2. **相对定位**：如果需要调整元素相对于其...