关于页面元素的绝对定位和相对定位的一些理解

合集下载

css中absolute原理

CSS中absolute原理1.前言在C SS样式设计中，a bs ol ut e（绝对定位）是一种常用的定位方式，它可以使元素脱离文档流，并根据父元素或祖先元素进行定位。

本文将介绍C SS中a bs ol ute的工作原理、应用场景以及常见问题。

2. ab solute的工作原理在C SS中，使用ab so l ut e定位的元素会被完全从文档流中脱离，不占用原本的空间。

通过设置元素的to p、r i gh t、bo tt om和l e ft属性，可以将元素相对于其最近的定位祖先或父元素进行定位。

如果没有找到定位的祖先元素，元素会相对于ht ml根元素进行定位。

3. ab solute的应用场景3.1单元素绝对定位单元素绝对定位是ab s ol ut e的最常见应用场景。

通过设置元素的t o p、ri gh t、bo tto m和l ef t属性，可以精确地定位元素在页面中的位置。

这在设计响应式布局时尤其有用，可以根据屏幕尺寸对元素进行动态定位。

3.2相对定位的父元素当父元素设置为r ela t iv e（相对定位）时，其内部的ab so lu t e元素会根据父元素的位置进行定位。

这种方式使得我们可以创建出重叠的元素布局，或者实现元素在某一区域内的局部定位。

3.3绝对定位与其他定位方式的结合应用在实际开发中，我们往往需要将绝对定位与其他定位方式结合使用，以实现更加丰富的布局效果。

例如，可以将r el at iv e定位的父元素与a b so lu te定位的子元素相结合，创建出复杂的多层次布局。

另外，a b so lu te定位也可以结合f le xb ox或g r id布局，实现更加灵活的页面效果。

4.注意事项-a bs ol ut e定位的元素不会对其他元素产生任何影响，因此在设计中要注意避免元素的相互遮挡问题。

-在浏览器兼容性方面，尤其是对于一些旧版本的浏览器，ab s ol ut e定位的效果可能会有所不同。

css定位方式有哪几种？

css定位⽅式有哪⼏种？复杂的⽹页布局都是通过各种⽹页元素灵活定位实现的，⽹页中的各种元素定位都有⾃⼰的特点。

下⾯我们来看⼀下css的⼏种定位⽅式。

float定位（即浮动定位）：这种定位⽅式很简单，只需规定⼀个浮动的⽅向（如：float:left;就表⽰这个元素向左边摆放），它的定位是相对于⽗元素容器；如果该元素设置了浮动，后⾯紧邻的则会受到浮动的影响，因此需要后⾯的元素若要不受影响，则要在后⾯清除浮动（可⽤clear:both;等⽅法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。

这种定位使得元素脱离⽂档流。

position定位：position定位是指定位置的定位，以下为常⽤的⼏种：1、static（静态定位）：当我们没有指定定位⽅式的时候，这时默认的定位⽅式就是static，也就是按照⽂档的书写布局⾃动分配在⼀个合适的地⽅，这种定位⽅式⽤margin来改变位置，对left、top、z-index等设置值⽆效，这种定位不脱离⽂档流；2、relative定位（相对定位）：该定位是⼀种相对的定位，可以通过设置left、top等值，使得指定元素相对其正常的位置进⾏偏移，这种定位不脱离⽂档流；3、absolute定位（绝对定位）：这种定位通过设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第⼀个⽗元素进⾏定位（这种定位通常设置⽗元素为relative定位来配合使⽤），在没有⽗元素的条件下，它的参照为body，该⽅式脱离⽂档流；4、fixed（固定定位）：这种定位⽅式是相对于整个⽂档的，只需设置它相对于各个⽅向的偏移值，就可以将该元素固定在页⾯固定的位置，通常⽤来显⽰⼀些提⽰信息，脱离⽂档流；5、inherit定位：这种⽅式规定该元素继承⽗元素的position属性值。

css position 代码

一、介绍CSS position属性CSS中的position属性用于控制元素在文档流中的定位方式，通过设置position属性，可以实现元素的绝对定位、相对定位、固定定位和静态定位等。

二、CSS position属性的取值1. static：元素的默认定位方式，即元素在文档流中按照正常的布局排列，top、right、bottom、left等属性无效。

2. relative：相对定位，元素在正常文档流中占据原先的位置，但可以通过top、right、bottom、left属性调整其相对原先位置的偏移。

3. absolute：绝对定位，元素脱离文档流，相对于距离最近的已定位的祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（即html元素）进行定位。

4. fixed：固定定位，元素固定在视口中的某个位置，不随滚动条的滚动而移动。

5. sticky：粘性定位，元素根据用户的滚动位置在相对定位和固定定位之间切换。

三、实例演示以下是一些CSS position属性的使用示例，以便更好地理解其效果。

1. 相对定位示例```css.relative {position: relative;top: 10px;left: 20px;}```上述代码将元素相对于其原先的位置向下偏移10px，向右偏移20px。

2. 绝对定位示例```css.absolute {position: absolute;top: 50px;left: 100px;}```以上代码将元素绝对定位在距离其最近的已定位的祖先元素的顶部50px、左侧100px的位置。

3. 固定定位示例```css.fixed {position: fixed;top: 0;right: 0;}```上述代码将元素固定在视口的右上角。

四、注意事项1. 在使用绝对定位时，要特别注意元素的定位参照物，以免出现意外的定位偏移。

2. 固定定位的元素会随着滚动条的滚动而固定在页面中的某一位置，因此在设计固定定位元素时要考虑到用户体验和页面布局的整体性。

绝对定位和相对定分解课件

02
需要创建复杂的导航菜单或模态框等特殊效果时。
03
需要将元素相对于其正常位置进行偏移或重叠时。
04
需要实现响应式设计，在不同屏幕尺寸下保持布局的一致性和可读性时。
05 绝对定位和相对定位的优缺点比较
绝对定位的优缺点
定位精确
绝对定位能够将元素精确地定位在指定位置，不受其他元素位置的影响。
绝对定位和相对定位
目录
CONTENTS
• 绝对定位 • 相对定位 • 绝对定位与相对定位的区别 • 绝对定位和相对定位的混合使用 • 绝对定位和相对定位的优缺点比较
01 绝对定位
绝对定位的定义
• 绝对定位是CSS定位的一种方式，它相对于最近的已定位祖先元素（即设置了position: relative 、position: absolute、 position: fixed或position: sticky的元素）进行定位。如果没有已定位的祖先元素，那么它会相对于初始包含块进行定位。
混合使用的特点
灵活性
混合使用绝对和相对定位可以创建更加复杂和灵活的页面布局，满足各种设计需求。
控制性
通过调整绝对和相对定位的参数，可以精确控制元素的位置和尺寸。
兼容性
在大多数现代浏览器中，绝对定位和相对定位都得到了很好的支持，具有良好的兼容性。
混合使用的使用场景
01
需要将某个元素固定在屏幕的特定位置，同时其他元素仍需保持相对位置不变时。
相对定位
元素的位置相对于其在正常流中的原始位置进行定位。即使元素被移动，它仍然保留其原始空间。
在页面布局中的区别
绝对定位
元素从正常文档流中删除，不占据空间，不会影响其他元素的布局。

相对定位和绝对定位的区别与应用

相对定位和绝对定位的区别与应用相对定位和绝对定位是前端开发中常用的两种定位方式，它们在网页布局和样式设计中起着重要的作用。

本文将深入探讨相对定位和绝对定位的区别与应用。

一、相对定位的特点与应用相对定位是相对于元素本身在正常文档流中的位置进行定位的。

通过设置元素的position属性为relative，可以使用top、right、bottom和left属性来调整元素的位置。

1. 相对定位的特点相对定位的元素仍然占据文档流中的空间，不会影响周围元素的位置。

它在原始位置的基础上进行微调，类似于微调器的作用。

相对定位的元素仍然遵循正常文档流的顺序，可以使用z-index属性进行层叠控制。

2. 相对定位的应用相对定位常用于微调元素的位置或对齐。

例如，在一个包含图片和文字的容器中，通过相对定位可以将文字相对于图片稍微上移一些，以保持整体视觉效果的平衡。

二、绝对定位的特点与应用绝对定位是相对于最近的具有定位属性（非static）的父元素进行定位的。

通过设置元素的position属性为absolute，可以使用top、right、bottom和left属性来精确地控制元素的位置。

1. 绝对定位的特点绝对定位的元素完全脱离了文档流，不占据空间，不影响周围元素的位置。

它将相对于最近的具有定位属性的父元素进行定位，如果没有找到匹配的父元素，则以文档的初始包含块为参考进行定位。

绝对定位的元素会覆盖在其他元素之上，可以使用z-index属性进行层叠控制。

2. 绝对定位的应用绝对定位常用于创建浮动效果、实现元素的悬浮、弹出框或对话框的定位等。

例如，在一个导航栏中，通过使用绝对定位，可以让下拉菜单在鼠标悬浮时以浮动的方式展开，并保持在合适的位置。

三、相对定位与绝对定位的区别相对定位和绝对定位都是用来调整元素位置的方法，但在使用上存在一些区别。

1. 定位参考点不同相对定位是相对于元素自身在文档流中的位置进行定位，而绝对定位是相对于最近的具有定位属性（非static）的父元素进行定位。

CSS中position属性介绍

CSS中position属性介绍 position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这⾥sticky是CSS3新发布的⼀个属性。

1、position: static static(没有定位)是position的默认值，元素处于正常的⽂档流中，会忽略left、top、right、bottom和z-index属性。

2、position: relative relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离⽂档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

3、position: absolute absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况： 1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。

2) 如果并没有设置了position属性的祖先元素，则此时相对于body进⾏定位。

4、position: fixed 可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。

5、inherit 继承⽗元素的position属性，但需要注意的是IE8以及往前的版本都不⽀持inherit属性。

在讲sticky之前，先上代码： html：<h5>Relative</h5><div class="div-container div-container1"><div class="div1">static1</div><div class="div2">relative1</div><div class="div3">static1</div></div><h5>Absolute</h5><div class="div-container div-container2"><div class="div1">static2</div><div class="div2">absolute2</div><div class="div3">static2</div></div><h5>Relative contains Absolute</h5><div class="div-container div-container3"><div class="div1">static3</div><div class="div2">absolute3</div><div class="div3">static3</div></div><h5>Absolute contains Absolute</h5><div class="div-container div-container4"><div class="div1">static3</div><div class="div2">absolute3</div><div class="div3">static3</div></div>6、sticky position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性⽆效），当该元素的位置将要移出偏移范围时，定位⼜会变成fixed，根据设置的left、top等属性成固定位置的效果。

position属性

5-3 节 position 属性position:relative 相对定位 absolute 绝对定位h2 {position:absolute;left:100px; top:150px;值 absolute描述生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

Relative生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

fixed生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

static inherit默认值。

没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

规定应该从父元素继承 position 属性的值。

（IE 不支持此属性）CSS 相对定位——相对于元素原来的位置发生移动，占位如果对一个元素进行相对定位，它将出现在它所在的位置上。

然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。

如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative { position: relative; left: 30px; top: 20px; }如下图所示：注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。

子元素绝对定位父元素高度自适应

子元素绝对定位父元素高度自适应在网页设计中，经常会遇到子元素需要绝对定位，而父元素的高度又需要自适应的情况。

这种情况下，我们需要找到一种能够解决这个问题的方法。

首先，我们需要了解绝对定位和自适应高度的概念。

绝对定位是指子元素相对于父元素进行定位，在页面中的位置确定不受其它元素的影响。

而自适应高度则是指父元素根据子元素的高度自动调整其自身的高度，以适应子元素的尺寸变化。

要实现子元素绝对定位父元素高度自适应，我们可以使用CSS的position属性和height属性进行设置。

首先，我们需要将父元素的position属性设置为relative，子元素的position属性设置为absolute。

这样，子元素就能够相对于父元素进行定位了。

然后，我们需要设置子元素的top属性和left属性，以确定子元素在父元素中的位置。

通过调整这两个属性的值，可以让子元素出现在父元素的任意位置。

接下来，我们需要设置父元素的height属性。

为了让父元素的高度能够自适应，我们可以将其设置为auto。

这样，当子元素的高度发生变化时，父元素的高度也会自动调整以适应子元素的尺寸变化。

除了以上的基本设置，我们还可以通过调整父元素和子元素的padding属性，来达到更好的效果。

通过增加或减小padding的值，可以改变子元素在父元素中的间距，使页面看起来更加美观。

总结起来，子元素绝对定位父元素高度自适应的方法如下：首先设置父元素的position属性为relative，子元素的position属性为absolute。

然后，通过调整子元素的top属性和left属性，确定其在父元素中的位置。

最后，将父元素的height属性设置为auto，以使其能够自动调整以适应子元素的尺寸变化。

同时，可以通过调整padding 属性来改变子元素在父元素中的间距。

这种方法在实现子元素绝对定位的同时，还能够保证父元素的高度能够自适应，使页面看起来更加美观。

position属性详解

position属性详解内容：1.position属性介绍2.position属性分类3.relative相对定位4.absolute绝对定位5.relative和absolute联合使⽤进⾏定位6.fixed固定定位1.position属性介绍position 属性规定元素的定位类型这个属性定义建⽴元素布局所⽤的定位机制。

任何元素都可以定位，不过绝对或固定元素会⽣成⼀个块级框，⽽不论该元素本⾝是什么类型。

相对定位元素会相对于它在正常流中的默认位置偏移position的值有：absolute、relative、fixed、static、inherit2.position属性分类position属性如下：1 position 属性⽤于元素定位:2 static 默认3 relative 相对定位，相对于⾃⼰本来应该在的位置4 absolute 绝对定位，⾏为有点奇怪5 fixed 固定定位，基于 window 的绝对定位, 不随页⾯滚动改变6 ⾮ static 元素可以⽤ top left bottom right 属性来设置坐标⾮ static 元素可以⽤ z-index 属性来设置显⽰层次7 relative 是相对定位(相对⾃⾝定位) absolute 完全绝对定位, 忽略其他所有东西, 往上浮动到⾮ static 的元素3.relative相对定位position：relative -> 相对定位(偏离⾃⾝)relative相对定位：相对定位是相对于该元素的原始位置，即以⾃⼰原始位置为参照物。

即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置(不脱离⽂档流)；另外relative相对定位依据top，right，bottom，left等属性偏移位置，其层叠通过z-index属性定义注：position：relative的⼀个主要⽤法：⽅便绝对定位元素找到参照物实例：显⽰平⽅1HTML:2<h3>relative实现相对定位</h3>3<div class="relative">4 <div class="double">5 E = MC<span class="square">2</span>是质能公式6 </div>7</div>89CSS:10.relative .square {11 position: relative;12 top: -7px;13 left: 0;14 color: black;15 font-size: 15px;16 }实现效果如下：4.absolute绝对定位position: absolute -> 绝对定位absolute绝对定位：将元素从⽂档流中拖出来，然后使⽤left、right、top、bottom属性相对于其最接近的⼀个具有定位属性的⽗包含块进⾏绝对定位。

html定位知识总结(带例子)

定位1、相对定位（1）特点a、不影响元素本身的特性；b、不使元素脱离文档流（元素移动之后原始位置会被保留）；c、如果没有定位偏移量，对元素本身没有任何影响；d、提升层级（2）相对定位的代码：先设置position为relative,再设置right/left/top/bottom的偏移量2、绝对定位（1）特点a、使元素脱离文档流b、提升层级c、如果父级元素有相对定位的，以父级元素为基准进行定位。

否则以浏览器窗口为基准进行定位。

例如：当div2设置为absolute时，div3会移动到div2的位置。

又因为div2的层级被提升，div2会遮挡div3。

因为现在div的父级元素是body，body并没有设置为relative，这时定位的基准是浏览器窗口。

而body在浏览器的margin为8px，所以设置div2向左移动200px会遮挡住div3宽度为8px的区域。

解决问题的办法有：把body的margin设置为0px或者把body设置为position:relative。

把body的margin设置为0px，所有元素都紧贴在浏览器窗口body设置为position:relative，div相对于body定位3、固定定位：就是固定在页面的某个位置，不随滚动条的移动而移动。

布局：透明重叠块z-index:数值高的在上面透明色设置：opacity:0-1，0为完全透明，1为完全不透明IE下面为filter:alpha(opacity=0-100),0为完全透明，1为完全不透明布局思路：设置一个父窗口为relative，然后子窗口就相对于父窗口便宜一点点。

设置z-index 的值让决定哪个窗口在下面。

设置在下面的窗口的透明值。

[Word]绝对定位相对定位

1.语法position : sttic | bsolute | fixed | reltive3.绝对定位（bsolute）：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body 对象左上角作为参考进行定位。

绝对定位对象可层叠，层叠顺序可通过z-index 属性控制，z-index值为无单位的整数，大的在最上面，可以有负值（目前负值FF不支持）。

相对定位（reltive）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。

同样可以用z-index分层设计。

4.（1）无定位设置，对象遵循HTML定位规则。

一般是子级不会跑出父级外边去（子级没有使用负边界情况），子级一般是靠在父级左上角的，父级放在最下层。

<html ><hed><met http-equiv="Content-Type" content="text/html; chrset=gb2312" /><title>无定位设定,对象遵循HTML定位规则</title><sty le type="text/css"></sty le></hed><body><div clss="box1"><div clss="box2"></div></div></body></html>(2) 给设定了定位属性的对象指定left，right，top，bottom属性中的至少一个，不然定位不起作用。

元素的四种定位方式

元素的四种定位方式随着网页开发技术的不断发展，定位正在成为网页开发的一个重要组成部分。

它允许我们控制元素的位置和大小，从而使网页更具有可读性和可视性。

在网页开发中，元素定位有四种方式：流定位，绝对定位，固定定位和相对定位。

它们有助于我们控制页面上元素的位置，以便使网页更加有组织。

1、流定位流定位是最常用的定位方式，它是一种相对定位，不需要任何CSS定位属性，只需要按照HTML文本的顺序排列元素即可。

元素的位置取决于它前面元素的位置，也取决于它的位置和大小。

2、绝对定位绝对定位是指元素的位置是相对于网页的边界的，而不是相对于其他元素的位置。

它可以使用CSS的position：absolute属性来实现，并且可以通过top，right，bottom 和left属性来控制元素的位置。

3、固定定位固定定位是指元素的位置是相对于浏览器窗口的，而不是相对于网页的某个部分。

它可以使用CSS的position：fixed属性来实现，并且可以通过top，right，bottom和left属性来控制元素的位置。

4、相对定位相对定位是指元素的位置是相对于它本身原有的位置的，而不是相对于其他元素的位置。

它可以使用CSS的position：relative属性来实现，并且可以通过top，right，bottom和left属性来控制元素的位置。

以上就是元素定位的四种方式，它们各有优缺点，可以根据实际情况选择合适的定位方式。

流定位是最常用的定位方式，它可以使元素按照文本的顺序排列，使页面更容易理解；绝对定位可以使元素相对于网页的边界定位，可以使元素在指定的位置保持不变；固定定位可以使元素相对于浏览器窗口定位，可以使元素固定在某个位置；相对定位可以使元素相对于它本身原有的位置定位，可以使元素在指定的位置上有一定的移动。

总的来说，定位是网页开发的重要组成部分，它可以使元素被安排在合理的位置，使网页更加有组织，可以提高网页的可读性和可视性。

CSS之定位布局（position，定位布局技巧）

CSS之定位布局（position，定位布局技巧）1.什么是定位：css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置⼀些不规则的布局，使⽤TLBR(top,left,bottom,right)来调整元素位置。

2.各个属性值的描述：static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进⾏层次分级，在普通流中，各个元素默认的属性。

relative(相对定位) 对象不可层叠、不脱离⽂档流，参考⾃⾝静态位置通过 top,bottom,left,right 定位。

absolute(绝对定位) 脱离⽂档流，通过 top,bottom,left,right 定位。

选取其最近⼀个最有定位设置的⽗级对象进⾏绝对定位，如果对象的⽗级没有设置定位属性，absolute元素将以body坐标原点进⾏定位。

fixed（固定定位）这⾥所固定的参照对像是可视窗⼝⽽并⾮是body或是⽗级元素。

使⽤了fixed的元素不会随着窗⼝的滚动⽽滚动。

属于absolute的⼦集。

3.各个属性值的具体作⽤：A.static：（静态，默认的属性）通常情况下都不会使⽤，但是会存在有些场景，就是你想把position的值从其他值修改成默认时使⽤。

B.relative：（相对定位）⼀个元素设定了position:relative，因为其不脱离⽂本流，如果不设置TLBR(top,left,bottom,right)的话，它的位置不会被改变，且不会影响当前布局，相当于没事发⽣⼀样。

如果设置了TLBR后，元素就可以向指定的⽅向偏移，但是他原有的位置还是占据着的，例⼦如图：图⼀：对child-1 设置了position：relative图⼆：再对child-1 调位置 top：20px left：20pxC.absolute: (绝对定位)，完全脱离⽂本流（普通流），原来的位置不再占有，且可以设置TLBR任意移动；特别说明⼀下，对元素设置了absolute后，其⽗级元素都没有设置position：absolute/relative/fixed其会以body为⽗级。

关于相对定位与绝对定位的区别

关于相对定位与绝对定位的区别之前⼀直搞不明⽩html中positon:relative; 和 position:absolute;这两个属性。

这⾥记录⼀下。

理论解释：相对定位：该元素相对于⾃⼰原有位置，偏移⼀定距离。

相对的是⾃⼰。

绝对定位：该元素相对于其⽗元素，偏移⼀定距离。

相对的是⽗元素，重点是这个⽗元素也需要是设置了position属性。

从最近的⽗元素开始找，直到找到body位置为⽌。

好吧，光看理论解释可能有点懵逼，还是来个⼩demo吧，直观。

1）相对定位<div id="test"><p class="p1">相对定位：相对于⾃⼰原来的位置，偏移⼀些距离</p><p class="p2">相对定位,相对的是⾃⼰</p></div>1234对应的css样式：#test{height: 300px;width: 300px;background: gray;}/*p标签本⾝会有padding和margin值*/p{margin: 0px;padding: 0px;}.p1{height: 100px;width: 100px;background: blue;}.p2{height: 80px;width: 80px;background: red;}1234567891011121314151617181920212223运⾏后效果是：(这时没有设置position属性呢)然后，给p1设置相对定位.p1{height: 100px;width: 100px;background: blue;/*设置相对定位*/position: relative;/*相对于左边偏移20px,相对于上边偏移20px*/left: 20px;top:20px;}12345678910运⾏后效果如下：ok了，相对定位就是这样啦，需要注意的是，p1虽然偏移了，但是同时它还占着它原来的位置。

position的值，relative和absolute分别是相对于谁进行定位的？

position的值，relative和absolute分别是相对于谁进⾏定位的？relative: 相对定位，相对于⾃⼰本⾝在正常⽂档流中的位置进⾏定位相对它原来的位置，在⾛100px。

原来在标准流中的位置继续占有。

absolute: ⽣成绝对定位，相对于最近⼀级定位不为static的⽗元素进⾏定位。

（⼦决⽗相）。

fixed: （⽼版本IE不⽀持）⽣成绝对定位，相对于浏览器窗⼝或者frame进⾏定位跟⽗元素没关系。

不随着滚动条的滚动⽽移动。

固定在浏览器可视窗⼝的位置。

static: 默认值，没有定位，元素出现在正常的⽂档流中。

相当none 没有定位的意思。

没有边偏移我们⼏乎不⽤。

position: sticky; 基于⽤户的滚动位置来定位。

粘性定位的元素是依赖于⽤户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的⾏为就像 position:relative; ⽽当页⾯滚动超出⽬标区域时，它的表现就像 position:fixed;，它会固定在⽬标位置。

C语言相对定位和绝对定位

相对定位和绝对定位
内容提要
定位属性position及其取值相对定位
相对定位的应用－偏移的导航条网页居中的相对定位法
绝对定位绝对定位的应用
缺角的导航条小提示窗口下拉菜单
2
使用定位属性position
利用浮动属性定位只能使元素浮动形成图文混排或块级元素水平排列的效果，其定位功能仍不够灵活强大。本节介绍的在定位属性下的定位能使元素通过设置偏移量定位到页面或其包含框的任何一个地方，定位功能非常灵活。
14
ቤተ መጻሕፍቲ ባይዱ 绝对定位
绝对定位
绝对定位，盒子的位置以他的包含框为基准进行定位。绝对定位的盒子从标准流中脱离。这意味着它们对其他元素的盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。注意：绝对定位是以他的包含框的边框内侧为基准进行定位，因此改变包含框的填充值不会对绝对定位元素的位置造成影响。绝对定位的偏移值是指从它的包含框边框内侧到元素的外边界之间的距离，如果修改元素的margin值会影响元素内容的显示位置。如果不设置绝对定位元素的偏移值，那么它位于未设置绝对定位属性时在标准流中的初始位置
18
绝对定位－设置包含框
p{ background-color: #dbfdba; padding: 25px; position:relative; border: 2px solid #6c4788; } em { background-color: #0099FF; position:absolute; left: 60px; top: 40px;}
12
相对定位制作简单的阴影效果
img { padding: 6px; border: 1px solid #465B68; background-color: #fff; position: relative; left: -5px; top: -5px; } div.shadow { background-color: #CCCCCC; float:left; } <div class="shadow"><img src="works.jpg" width="150" height="140" /></div>

通过案例理解position：relative和position：absolute

通过案例理解position：relative和position：absolutew3school过了HTML的知识之后，觉得要⾃⼰单纯地去啃知识点有点枯燥，然后⾃⼰也很容易忘记，所以便找具体的⽹站练⼿便补上不懂的知识点。

position:relative和postion:absolute困扰了我快⼀个星期之久，⽹上找到的资料鱼龙混杂，刚确定“这样”的理解之后，看另⼀份资料，发现“这样”理解是错了，就这样不断更正，并记录下来，最终整理出这份，以备参阅。

若有错误，请指正。

下⾯的结果都是基于firefox38版本来测试的。

position:relative相对定位1. 如何定位？每个元素在页⾯的普通流中会“占有”⼀个位置，这个位置可以理解为默认值，⽽相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置。

（在⽗级节点的content-box区定位，⽗级节点有⽂字的话，元素的默认位置则是紧随⽂字）2. 不会改变⾏内元素的display属性。

3. 并没有脱离普通流，只是视觉上发⽣的偏移。

代码——<body style='margin:0;padding:0;background:#BDD7EE;color:white;'><div class='contain' style='margin:10px;border:10px solid white;width:300px;background:#F8CBAD;padding:10px 0 0 10px;font-size:20px;font-weight:bold;'><div class='one' style='width:50px;height:50px;background-color:#FFE699;top:-10px;left:0px;'></div><div class='two' style='height:50px;color:#fff;background-color:#C5E0B4;'>position:relative定位测试</div></div></body>显⽰——给⼦元素one的style加上position:relative;后显⽰——给⽗级元素contain的style加上⽂字后显⽰——将one由div节点改为span节点，并加⼊⽂字“你好”之后显⽰——<body style='margin:0;padding:0;background:#BDD7EE;color:white;'><div class='contain' style='margin:10px;border:10px solid white;width:300px;background:#F8CBAD;padding:10px 0 0 10px;font-size:20px;font-weight:bold;'>如果⽗级节点有⽂字的话... <span class='one' style='width:50px;height:50px;background-color:#FFE699;position:relative;top:-10px;left:0px;'>你好</span><div class='two' style='height:50px;color:#fff;background-color:#C5E0B4;'>position:relative定位测试</div></div></body>position:absolute绝对定位1. 如何定位浮动？设置了TRBL相对最近的设定了position:relative/absolute的⽗（祖先）节点的padding-box的区进⾏定位（忽略⽂字），找不到符合条件的⽗（祖先）节点，则相对浏览器窗⼝进⾏定位。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

从今天开始要经常性地把一些小知识点整理一下了，可能有些很简单，不过应该是都能用的到地. 
关于div地绝对定位和相对定位，这个是每一个搞前端地it人员都会用到地，所谓绝对定位，就是这个东西就是在那里了，不管其他东西怎么动，我地位置不变，这个说好听点叫有气节，说不好听了叫耍无赖.当然一般使用绝对定位都是为了相对定位用地.这个就类似于黑帮收保护费，这一片归我管，那我里面地元素位置都是想对我而言地，和外界没有关系.说完绝对定位，来说一下相对定位，含有这个属性地元素就很没气节了，领导去哪我去哪，永远围着领导转.恩恩，扯这么多言归正传. 
有些时候，我们需要在一个图层上面加点东西，但是在web页面里面不能像ps里面这么方便地添加.我们需要写一个div（或者其他容器）来存放我们这个图层里面地东西，然后把它放到我们想要放置地图层（div）内，将我们父层地style属性内地position设为absolute，最后将我们新建地div地style地position设为relative.这样我地层就会置于父层之上了.子层会有top bottom left right属性，通过上下左右我们可以定位我们地元素了. 
有一点需要注意，如果你没有定义一个绝对定位层，那么你地相对定位就是相对整个页面而言地，一个大家常用地原型设计软件axure rp就是全局地相对定位.其实axure rp挺好用地. 
更多信息请查看IT技术专栏。