绝对定位布局，通过设置position属性实现
position属性
拥有3种定位形式：1.静态定位 2.相对定位 3.绝对定位
4个属性值：static(静态定位)，relative(相对定位) ，absolute(绝对定位) ，fixed(固定定位)（也属于绝对定位）
相对定位：
特点：
相对于自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性
绝对定位：
特点：
建立了以包含块为基准的定位
完全脱离了标准文档流 也就是说他对他的兄弟元素不再有任何影响的
随即拥有偏移属性和z-index属性
未设置偏移量时：无论是否存在已定位祖先元素（如果一个元素设置了绝对定位、相对定位或者固定定位，我们都说这个元素已经定位了。），都保持在元素初始位置
脱离标准文档流
设置偏移量时：偏移参照基准：
无已定位祖先元素：以<html>（元素的根元素）为偏移参照基准
有已定位的祖先元素：以离该元素最近的已经定位的祖先元素作为偏移参照基准
fixed 定位：
未设置偏移量时：
有已定位的祖先元素：以离该元素最近的已经定位的祖先元素作为偏移参照基准
无已定位祖先元素： 浏览器可视窗口为基准偏移.
设置偏移量时：
无论有无已定位祖先元素，都以浏览器可视窗口为基准偏移。
使用绝对定位实现横向两列布局：常用于一列固定宽度 ，另一列宽度自适应的情况
主要应用技能：
relative--父元素相对定位
absolute--自适应宽度元素绝对定位
注意：固定宽度的列一定要大于自适应宽度的列
如果一个元素没有设置宽度，这个元素设置了float或者绝对定位之后，元素的宽度随着内容的宽度变化而变化
在对元素进行固定定位设置时，如果希望本元素包含在其父元素内，则不需要对它设置偏移量：
此时，给它设置 left:0,就会相对浏览器可视窗口0像素，因此，不用设置left，保留它原有的右侧的位置。
笔记来自：http://www.imooc.com/learn/95
相关推荐
CSS定位主要包括静态定位、相对定位、绝对定位、固定定位和粘性定位。其中，相对定位是基础，它允许元素相对于其原始位置进行偏移，但不会改变文档流。相对定位的CSS代码通常写作： ```css .element { position: ...
在CSS中，定位分为静态定位、相对定位、绝对定位、固定定位等几种方式。静态定位是默认的定位方式，元素遵循正常的文档流；相对定位则保持元素在文档流中的位置，但允许通过偏移量改变位置；而绝对定位则彻底脱离...
CSS提供了几种定位模式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）以及粘性定位（sticky）。每种定位模式都有其特定的应用场景和特点： 1. **静态定位（static）**...
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）以及固定定位（fixed），每种定位方式都有其独特的特性和应用场景。 #### 静态定位（Static） - **定义**：静态定位...
CSS提供了多种定位方式，包括普通流、浮动以及绝对定位等，每种方式都有其特定的应用场景。 #### CSS Position属性详解 `position` 属性用于指定元素的定位类型，主要有以下几种： - **Static**：这是默认值，...
相对定位是绝对定位的基础，当设置为absolute时，元素会基于最近的非static定位的祖先元素进行定位。 3. **absolute（绝对定位）** absolute定位将元素从正常的文档流中移除，根据最近的已定位祖先元素（非static...
绝对定位和相对定位是CSS布局中的核心概念，对于创建动态、交互式网页至关重要。掌握它们的差异和应用场合，可以帮助开发者更灵活地控制页面元素的布局，提升用户体验。在实际项目中，通常需要根据具体需求结合使用...
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。静态定位是元素的默认定位方式，不改变元素在文档流中的位置。相对定位则...
CSS 提供了多种定位模型，如静态定位、相对定位、绝对定位、固定定位和粘性定位。这些定位方式都是为了帮助开发者更好地控制元素在页面上的位置和排列。 1. 静态定位（Static Positioning）： 这是元素默认的定位...
这种布局通过CSS的绝对定位技术来实现，下面我们将详细探讨这一技术。 首先，我们了解基本的CSS布局模型。在HTML中，元素默认是流式布局（block or inline layout），但随着CSS的发展，出现了更多布局方式，如浮动...
5. **sticky**：粘性定位，结合了相对定位和固定定位的特点，当元素在视口内时，表现为相对定位，超出视口则变为固定定位。 在实际练习中，你可以尝试创建多个div元素，并分别设置不同的`position`值，观察它们如何...
5. **粘性定位（sticky）**：元素在满足某个条件（如滚动到特定位置）时，会从相对定位切换到固定定位。使用`position: sticky;`，通常结合`top`, `bottom`, `left`, `right`使用。 **三、应用场景** 1. **响应式...
CSS定位主要包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。静态定位是元素的默认定位方式，不改变元素的位置。相对定位使元素相对于其正常位置移动...
当父元素使用相对定位，子元素使用绝对定位后，这样子元素的位置不在浏览器左上角，而是相对于父容器左上角。 #### 5.1.5 z-index 当多个元素添加绝对定位，元素将会叠加在一起，使用 z-index 可以设置元素显示的...
在CSS中，绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。绝对定位使元素的位置与文档流无关，因此不占据空间。...
与相对定位不同，绝对定位的元素不再占据原来的空间，这意味着它们不会影响到其他元素的布局。 **示例代码：** ```css #parent { position: relative; } #sub1 { position: absolute; padding: 5px; top: 5px...
*定位分为静态定位，绝对定位，相对定位，固定定位，粘性定位* （1）static 静态定位： position的默认值，默认文本流的状态。 不会识别left right top bottom指定的坐标 （2）absolute 绝对定位: a : ...
本篇文章主要探讨了`div`中的相对定位（`relative`）与绝对定位（`absolute`）的区别及其应用。 1. 相对定位（`position: relative;`） 相对定位保留了元素在正常文档流中的位置，元素的原始位置不会被改变，但它...
CSS提供了多种定位方式，主要包括一般流定位、浮动定位以及绝对定位、相对定位和固定定位等。 #### 一、CSS定位机制 1. **一般流定位**：这是最基础的布局方式，元素按照它们在文档中的顺序依次排列。例如，块级...