关于页面元素的绝对定位和相对定位的一些理解
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 属性来改变子元素在父元素中的间距。
这种方法在实现子元素绝对定位的同时，还能够保证父元素的高度能够自适应，使页面看起来更加美观。
- 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技术专栏。