HTML布局之CSS绝对定位
1.1 CSS绝对定位——position
1.1.1语法
position:static;
无特殊定位，对象遵循HTML定位规则。
position:absolute;
将对象从文档流中拖出（即脱离他的父级元素），使用left，right，top，bottom等属性进行绝对定位(相对于整个页面来换算的)。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
position:relative;
对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移位置。
position:fixed;
相对于窗口的固定定位,元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如浏览器中，元素在文档滚动时不会在浏览器视察中移动。left right top bottom四个属性相对于窗口来换算，与相对于整个页面来换算最大的区别是当页面宽高超过窗口的时候。
注意：IE6不支持CSS中的position:fixed属性。
1.1.2实际应用
绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css margin进行相对定位，这时就可以使用绝对定位。特别是一个盒子里几个小盒子不规律的布局，这个时候使用position绝对定位非常方便布局对象。
例：绝对定位子级块在父级块盒子内的位置。
HTML代码
<div class="div1">
<div class="div1-a"></div>
</div>
CSS代码
.div1{
/*定义父级position:relative，就认为是绝对定位声明吧*/
position:relative;
/*最好再定义CSS宽度和CSS高度*/
}
.div1-a{
/*使用绝对定位position:absolute样式并且使用left、top进行定位位置*/
position:absolute;
left:10px;
/*定义了距离父级左侧距离间距为10px*/
top:10px;
/*定义了距离父级上边距离为10px*/
}
或
.div1-a{
/*使用绝对定位position:absolute样式并且使用right、bottom进行定位位置*/
position:absolute;
right:10px;
/*定义了距离父级靠右距离10px*/
bottom:10px;
/*定义了距离父级靠下边距离为10px*/
}
注意:
1>left（左）和right（右）在一个对象只能选一种定义，bottom（下）和top（上）也是在一个对象只能选一种定义。
2>绝对定位与float浮动不能同时使用。
总结
通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。
绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这时将会以body标签为父级。使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。
left、right、bottom、top的数值可以使用PS切片工具获取准确的数值。
1.2 CSS层重叠顺序——z-index
实际上，应该把网页想象成鸟瞰图。虽然看到的是平面的，但实际上它是有立体的概念的。z-index来管理HTML元素的高度。
注意：后写的定位的层级比先写的高。
1.2.1语法
z-index:number[具体数字];数字为负值时，设置该属性的元素被普通流中的元素覆盖。
z-index:auto[默认，IE6/IE7中未设置的情况下，元素的z-index值为零];设置了该属性的元素不参与层级比较。
z-index:inhert;
例：
div{
z-index:100;
}
注意：
z-index的数值不跟单位。
值必须为整数和正数（正数的整数）。
z-index的值越高越靠前。
z-index使用条件
z-index的使用依赖于定位属性，让不同的对象盒子以不同顺序重叠排列。
1.2.2两个DIV或多个DIV顺序重叠加
使用position实现绝对定位，对父级设置position:relative属性，对其子级设置position:absolute加上left或right和top或bottom实现子级在父级内任意定位。在原始情况下重叠是按DIV代码本身顺序排列，越后输入的DIV盒子其越靠前（浮在上面）。除了改变源代码本身div代码在html顺序，还可以使用css z-index实现DIV层排列顺序。
分享到：
相关推荐
在CSS（层叠样式表）中，网页布局是构建页面结构和控制元素位置的关键...通过深入理解和熟练掌握绝对定位与相对定位，你可以创建更加灵活和精确的网页布局，提升用户体验。不断实践和试验是成为CSS布局大师的关键步骤。
### CSS定位详解：绝对定位与相对定位 #### 相对定位（Relative Positioning） 相对定位是一种常见的CSS定位方式，它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...
这种布局通过CSS的绝对定位技术来实现，下面我们将详细探讨这一技术。 首先，我们了解基本的CSS布局模型。在HTML中，元素默认是流式布局（block or inline layout），但随着CSS的发展，出现了更多布局方式，如浮动...
本文将深入探讨CSS绝对定位属性`absolute`的用法，并提供实例来帮助理解。 首先，理解`position`属性是至关重要的。这个属性决定了元素如何在页面上定位。当`position`的值设为`absolute`时，元素就进入了绝对定位...
在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许元素脱离其正常文档流，并根据相对于某个特定祖先元素的位置进行布局。这篇博客“css-绝对定位的参考对象”深入探讨了这一主题，让我们一...
4. **定位机制**：CSS提供了多种定位机制，包括静态定位、相对定位、绝对定位和固定定位。静态定位是元素的默认定位，其他三种定位则允许开发者精确控制元素的位置。 5. **浮动布局**：在早期的Web开发中，浮动布局...
2. 定位模式：CSS提供了相对定位、绝对定位、固定定位和静态定位四种定位方式。相对定位使元素相对于其正常位置移动，不脱离文档流；绝对定位相对于最近的非静态定位祖先元素定位；固定定位则相对于浏览器窗口定位；...
HTML 和 CSS 是构建网页设计的基础，本项目主要运用了 Flex 布局和绝对定位这两种强大的CSS技术。Flex布局（Flexible Box），又称弹性盒布局，是现代网页布局的首选方式，它极大地简化了多行多列元素的排列，特别是...
固定定位与绝对定位类似，不同之处在于它是相对于浏览器窗口进行定位的。这意味着一旦元素被固定定位，它会一直保持在视窗的相同位置，即使页面滚动也不会改变位置。 定位的拓展运用时，还需注意几个方面。首先，...
在HTML和CSS的学习过程中，定位（Positioning）是至关重要的一个环节，它允许开发者精确地控制元素在网页上的布局。本练习集旨在帮助初学者掌握这一核心概念，特别是对定位理解不清晰的同学，通过实践可以更好地理解...
HTML5与CSS3网页制作之绝对定位 HTML5与CSS3网页制作中，绝对定位是一种常用的定位方式，它可以将元素精确定位在网页中的特定位置。绝对定位的实现是通过CSS中的position属性实现的，该属性可以将元素的位置设置为...
浮动常用于创建多列布局，而定位则能精确控制元素在页面上的位置，如相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。 4. CSS3新特性：CSS3引入了许多新功能，如伪类和伪元素、过渡(transitions)、动画...
CSS还有浮动（`float`）和定位（`position`）机制，用于创建传统的流式布局和相对/绝对定位布局。 响应式网页设计是现代网页开发的关键，通过使用媒体查询（`@media`）和弹性盒模型（Flexbox）或CSS Grid，可以确保...
【深入理解CSS布局之定位与浮动】 在CSS布局中，定位和浮动是两...同时，随着CSS Flexbox和Grid布局的发展，浮动和绝对定位在某些场景下可能被替代，但仍需掌握这些基础概念，因为它们在某些特定布局中仍然不可或缺。
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）以及固定定位（fixed），每种定位方式都有其独特的特性和应用场景。 #### 静态定位（Static） - **定义**：静态定位...
在CSS中，实现多栏布局通常有多种方法，而绝对定位和浮动是两种常见的技术。这两种方法各有特点，适用于不同的场景，且可以相互结合以达到更复杂的布局效果。 **1. 绝对定位** 绝对定位允许开发者精确地控制元素的...
- Positioning：包括静态、相对、绝对和固定定位，通过`position`属性控制元素的位置。 3. CSS3选择器增强： - 类型选择器（如`h1`、`p`）、类选择器（`.class`）、ID选择器（`#id`）的基础上，增加了伪类（`:...