×

css相对定位和绝对定位

css相对定位和绝对定位（css中的绝对定位和相对定位有什么区别）

admin admin 发表于2023-06-18 13:34:33 浏览33 评论0

抢沙发发表评论

本文目录

css中的绝对定位和相对定位有什么区别


css中的绝对定位和相对定位的区别：

  1. position: absolute，绝对定位。position: relative，相对定位。

  2. position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。

CSS：

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。


css里面相对定位跟绝对定位一直无法理解，有没有通俗易懂的办法解决


相对定位：relative，想象为站在原地不动，设置right，left，bottom，top等时就是相对于现在原地不动位置的偏移；

② 绝对定位：absolute，想象为在左上角，从左上角开始为初始位置


css中的绝对定位和相对定位有什么区别拜托了各位 谢谢


个人的理解。
相对定位：在原位置上占用空间，可以设置浮动的上下位置。
绝对位置：在原位置上，不占用空间，设置位置会以整个页面为标准。
-----------------------------------------------
---------
以下是复制别人的
-------------
一.相对定位
相对定位是一个非常简单容易掌握的概念，如果对一个元素进行相对定位，他将出现在其他所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”他的起点进行移动。如果将top设置为20像素，那么框将出现在原来位置顶部下面20像素的地方。如果将left设置为20像素，那么会在元素左边创建20像素的空间，也就是将元素向右移动。
二.绝对定位
相对定位实际上被看做普通流定位模型的一部分。因为元素的位置相对于它在普通流中的位置。与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。
求采纳

css定位中绝对定位和相对定位的区别


区别如下：
1、相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
2、绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
3、绝对定位的元素以最近的定位祖先元素为参照物。

css中绝对定位和相对定位是什么意思


绝对定位（absolute）意思是：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的。

相对定位（relative）意思：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

  1. 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

  2. CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。


css中绝对定位和相对定位的区别


通俗点说：
定位，就是给定一个参照点，根据这个参照点进行偏移。
绝对定位：参照点是文档起始点，也就是窗口左上角
相对定位：参照点是父级的左上角
还有一个固定定位（fixed），参照点也是窗口左上角，只是固定定位的元素，不会跟随文档滚动

CSS绝对定位与相对定位的区别


定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。

在这四种方案中，静态和相对定为不会影响整个文档布局，而绝对和固定定位则会脱离文档，因此页面不会为这两类定位元素预留空间。在预设状态下，所有元素均是静态的定位方式，也即这些元素按照原本的从上到下及从左到右的顺序进行排布。

只要为该元素设定了「position」属性，你就可以使用「top」、「right」、「bottom」和「left」这四个属性来精准定义其应该所在的地方。

在这个示例中，归属Element类别的元素将相对于其原来所在的位置分别向右和向下移动50个像素。若在此将「position」的值改为「absolute」或「fixed」，那么该元素将离最近的已定位的祖先元素的左边缘和上边缘分别距离50个像素。

我们一般使用「left」和「top」这两个属性就够了。如果想要避免元素在定位后，其尺寸会随着浏览器视窗的变化而变化出意想不到的结果，那么你应该先设定好该元素的大小，然后再定位其左上方的点。

相对定位

相对定位是相对于正常排列的位置进行偏移，该元素原本所在的位置会被空出来，空出来的部分仍然会影响到后续元素的排列效果。

如上图所示，position:relative仅仅影响了元素本身，其原有位置被保留，但由于它向右上方进行偏移，因此遮住了第一部分文字的部分区域。

元素是相对于包含它的块来定义的，这个块是当前定位元素的父元素或祖先元素。在上例中，《body》即为包含这三个段落的块。如果对样式表做一些修改，新增

然后将这三个段落放在ID为「Pos」的《div》标记内，那么这三个段落将集体向右偏移50个像素，而其中的「Element」类别的段落将以这个《div》为基准进行偏移——即相对于包含它的块进行偏移。

除了包含块以外，还有匿名块。如果包含块内同时有块级元素和巢状元素，那么浏览器将自动建立匿名块：

当这两种元素混杂在一起时，匿名块能够让浏览器正确地建立页面布局。如果将上述《div》的定位方式由「static」改为「relative」，那么，匿名块能够正确地安排其中的巢状文字和段落。

如果有两个相对定位的元素以巢状形式出现，那么内部的那个元素是相对于外部的——也就是它的父元素来定位，而外部的那个元素是相对于《body》来定位的。

绝对定位

相对定位中的「top」、「right」、「bottom」和「left」被用于设定相对于该元素原本所在位置的偏移量，而绝对定位的这四个属性则不太一样。在绝对定位中，「top」指的是被定位元素上方的外边框和包含块上方的内边框之间的距离。换句话说，被定位元素的外边距和包含块的边框会影响top的值，进而影响绝对定位元素的位置，但包含块的内边距不会产生任何影响。在相对定位中，「top」指的是被定位元素上方的外边框和其原始位置的上边缘的距离。

「bottom」的含义与「top」差不多，它指的是该定位元素下方的外边框和包含块下方的内边框之间的距离。「left」和「right」也大抵如此。

这样看来，定义元素的尺寸又多了一种新方式，除了直接设定其「width」和「height」属性以外，你还可以同时定义「left」和「right」来设定其宽度，同时定义「top 」和「bottom」来设定其高度，设置可以同时定义这四个属性，这样的话，该元素的尺寸就完全定下来了。如

如果有一个绝对定位元素位于其它相对或绝对定位元素的内部，那么该巢状元素将以相对于包含元素的方式被定位。例如下面的范例：网页内有一张图片，使用者可以在这张图片上添加矩形，然后往其中写一些说明文字。

HTML档案的内容如下：

CSS档案的内容如下：

效果如下：

在一个相对定位的《div》元素中，添加了一张图片，然后又添加了一个绝对定位的《div》元素。那为何要将外部的《div》——也就是ID为「Pic」的元素设定成相对定位呢？很简单，因为要使它所包含的元素以它为基准进行定位，而不至于飘到别处去，以至于覆盖了别的元素。

上面的这个例子就是一个简单的覆盖——利用绝对定位元素脱离文档的特征来在图片上建立一个覆盖层，这个例子可以作一点改进：当使用者点选图片的左半边区域时，让浏览器显示上一张图片；当使用者点选图片的右半边区域时，让浏览器显示下一张图片。

首先删除之前的覆盖层，建立两个连结。

HTML档案的内容如下：

CSS档案的内容如下：

效果如下：


利用CSS堆定位元素位置的方式有哪些呢


css常用的定位方式有五种：
1、static定位(普通流定位) -------------- 默认定位
2、float定位(浮动定位) 例：float:left;
有两个取值：left(左浮动)和right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，有float样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。
如果父元素的宽度太窄，那么其他浮动元素会向下移动，直到有足够的空间（左图所示）；如果浮动元素的高度不同，那么其他浮动元素向下移动时，就有可能会出现卡住的情况（下图所示）
注意：浮动元素的外边缘不会超过父元素的内边缘；浮动元素不会上下浮动；浮动元素不会互相重叠，会像行内块元素一样排列。
如果想要既设置浮动，又使父元素的高度被浮动元素撑开，即清除子元素浮动对父元素带来的高度的影响，有四种方法可以实现：
假设HTML代码部分为：
《div class=“parent“》 这是父元素
《div style=“float:left“》 这是子元素《/div》
《/div》
1) 为父元素设置固定高度 -------------缺点：不知道具体高度没办法设置
CSS代码部分：
.parent{
//...
height:xxx; //某个固定值
}
2) 在父元素内，在浮动元素的下方多写一行代码：《div style=“clear:both“》《/div》 ------------- 缺点：增加代码冗余
HTML代码部分：
《div class=“parent“》 这是父元素
《div style=“float:left“》 这是子元素《/div》
《div style=“clear:both“》《/div》
《/div》
3) 为父元素设置css规则：overflow:hidden ------------- 缺点：有时候不希望超出部分隐藏
.parent{
// ...
overflow:hidden ; //某个固定值
}
4) 内容生成 ------------- 最优的方法，推荐
CSS代码部分：
.parent:after{
content:’’;
display:’block’;
clear:both;
}
3、relative定位(相对定位) position:relative;
相对本元素的左上角进行定位，top,left,bottom,right都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素，或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。
相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。
4、absolute定位(绝对定位) position:absolute;
相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。
5、fixed定位（固定定位）position:fixed
相对于窗口的位置，而且不受其他网页内元素影响，永远处于浏览器窗口的相对位置。
绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。可以设置z-index属性。
注意：当同时有浮动元素和绝对定位元素出现并且浮动元素没有设置z-index，浮动元素是压在绝对定位元素上的，即离用户的视线更近。