css中的position

最新推荐文章于 2025-05-21 17:09:00 发布
原创 最新推荐文章于 2025-05-21 17:09:00 发布 · 195 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #定位

本文深入解析了CSS中相对定位和绝对定位的区别。相对定位使元素在标准流中提升一级，仍占据原有位置；而绝对定位完全脱离标准流，不占据原有位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css中的相对定位是比标准流高了一级，是浮动在标准流上面，脱离标准流，而且是占着位置的，而绝对定位也是飘起来，但绝对定位是不占位置的，脱离标准流

CSS定位position总结（超详细哦！）
weixin_52625590的博客
08-01 3万+
开始学习css页面布局时，先接触到的有 **标准流 或 浮动**，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。 例如： **场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 这个时候我们就需要学习新的布局方法了——`定位（position）`...............
CSS中position属性之fixed实现div居中
09-03
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。`position`属性有多个值，如`static`、`relative`、`absolute`和`fixed`，每种都有其特定的用途。在这个场景中，我们主要关注的是...
关于CSS中position属性和overflow属性的使用小结
学无止步的博客
08-18 3459
关于CSS中position属性和overflow属性的使用小结 position属性 用于设置某个元素的位置类型。取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。 2、position: relative relativ
CSS Position(定位)
最新发布
quyunde的博客
05-21 439
CSS 的position属性在网页布局中至关重要，它能精准调控元素在页面里的呈现位置。下面为你详细介绍这个属性的主要取值及其运用场景。
CSS position详解
前端小白
08-26 2065
1.首先必须说明的，是浏览器渲染DOM的原理。浏览器根据html中的顺序依次渲染，对文字图片等进行分块，一个块接一个块渲染。 2.接下来，要说明的是，可以设置块的大小。 3.然后看一下position， position属性有四个值，static、relative、absolute、fixed。         A.static：这个值表示默认，让浏览器按照没有positio
【CSS】 Position(定位)
weixin_43885779的博客
01-28 229
position 属性指定了元素的定位类型。 position 属性的五个值： 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。 <s...
css中position:fixed实现div居中上下左右居中
09-25
在这段CSS代码中，首先设置了.dialog类的position属性为fixed，确保该DIV相对于视口定位。接着，通过设置top: 50%和left: 50%属性，将DIV元素的左上角定位到视口的中心位置。然后，通过设置margin负值来调整DIV元素...
CSS之position详解
BlizzardWu的博客
05-25 7548
定义和用法 position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 position属性有五个可选值，分别是absolute、fixed、relative、static、inherit： absolute: 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right以及bottom属性进行规定。
CSS中position详解
热门推荐
木习习的博客
06-26 2万+
一些关于定位和叠加的理解 一、position属性 position有5个值，分别为static，relative，absolute，fixed，sticky。 1.1 static static是position的默认属性，元素会按正常的文档流进行排序，不会受到top，bottom，left，right的影响。 1.2 relative relative相对定位的元素会较正常文档流中的位置进...
CSS中的position
Caroline的博客
06-09 1260
position有static、relative、absolute、fixed、inherit几个属性.1、static    默认值，元素正常出现在文档流中。2、relative    相对元素原始的位置进行定位，可以通过top、left、bottom、right指定偏移位置。元素原本所占的空间仍然被保留。3、absolute    绝对定位。将元素从文档流中移出，使用top、left、bott...
CSS中position属性详解
猫老板的豆
05-13 948
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动(float)、绝对定位(absoulte)和固定定位(fixed)。属性是否脱离文档流滚动影响定位原点static否跟随滚动无relative否跟随滚动元素本身在文档流中的位置absoulte是跟随祖先容器滚动最近的已定位祖先元素或<html>根元素(受根元素边距影响)fixed是不跟随滚动浏览器视口（viewport）的左上角。
CSS 中的position
邢美玲
11-24 268
学习前端position： 在页面布局的时候，经常会设置div的位置大小样式，通常通过使用position,可以找到position对应的属性 例子： 一：初始化状态： 二：添加相对位置：relative 三：添加绝对位置：absolute 四：为了避免脱离了大框，脱离了常规流 可以修改如下： 参考链接：CSS--positionCSS-demo ...
CSS - Position
05-23 789
零、概念： static 自然模型 a、如果两个相邻间的元素都设置了外边距（且有效），则他们之间的距离取决于最大的那个元素的外边距，而不是两个元素的外边距相加。 relative 相对定位模型 absolute绝对定位模型 a、填充 b、左右居中 c、上下左右居中 fixed 固定定位模型 sticky 磁贴定位模型 Ps1：矩形定位。 Ps2：以前都是用 JS 实现的，现在...
css中的定位（position）
qq_44879525的博客
04-16 307
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中： 1. 普通流（标准流） 2. 浮动 - 让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。 3. 定位 - 将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。 所以，我们脑海应该有三种布局机制的上下顺序 标准流在最底层 ...
CSS中的position属性
Mean
10-15 701
目录 1. position的定义及各属性值 2. 各属性值详解 static relative absolute fixed sticky 3. 其他 relative与absolute的主要区别 什么是文档流 z-index属性 1. position的定义及各属性值 position 设置元素的定位类型，其属性值有以下几种： static（静态定位）：posi...
css中position的值
02-14
在CSS中，position属性用于指定元素的定位方式。它有以下几个常用的取值： 1. static（默认值）：元素按照正常的文档流进行布局，不进行特殊的定位。这是position属性的初始值。 2. relative：元素相对于其正常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值