CSS 定位（position）

最新推荐文章于 2025-01-01 17:18:28 发布

原创最新推荐文章于 2025-01-01 17:18:28 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#position #定位 #css

css 专栏收录该内容

9 篇文章

订阅专栏

本文深入解析CSS中的相对定位relative和绝对定位absolute的特性与应用。详细介绍了两种定位方式如何影响元素位置，包括它们对文档流的影响、层级提升以及如何使内联元素支持宽高设置。特别强调了绝对定位在给定偏移量时相对于document的偏移，以及配合相对定位使用的技巧。

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

定位

提了层级比浮动的高

（1）相对定位 relative ------相当于自己原来的位置
1、不影响元素本身的特性
2、不使元素脱离文档流
3、提升层级
4、如果没有定位偏移量，对元素本身没有影响

（3）绝对定位 absolute
1、如果没有定位偏移量，在原来的位置；
给了定位偏移量，相对于document发生偏移
2、让内联元素支持宽高
3、默认由内容撑开宽度
4、配合相对定位使用（给父级添加相对定位）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

o_jj_o

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS定位position总结（超详细哦！）

weixin_52625590的博客

08-01

3万+

开始学习css页面布局时，先接触到的有 **标准流或浮动**，但是经过后续的学习发现有些场景很难通过标准流或浮动来快速实现。例如： **场景1**：某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。这个时候我们就需要学习新的布局方法了——`定位（position）`...............

CSS中的Position定位

zmcizc的博客

10-17

1462

CSS中的Position用来规定对象定位类型的属性，Position中提供了几个定位机制，用来布局对象；任何类型的对象都可以用Position来定位；

参与评论您还未登录，请先登录后发表或查看评论

CSS 之 position 定位属性详解

最新发布

李赛赛的专栏

01-01

999

💎position属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。元素其实是使用top、bottom、left 和 right属性定位的。但是，除非首先设置了position属性，否则这些属性将不起作用。根据不同的position值，它们的工作方式也不同。

CSS的position定位

m0_62065520的博客

02-06

1059

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素前面。固定定位的元素不会在页面中通常应放置的位置上留出空隙。

css定位position属性详解

Crazy程序猿

04-06

766

css定位position属性详解

CSS定位position的层级关系问题

weixin_44703582的博客

10-11

1927

目录前言一、position是什么？二、position属性 1.静态定位(static) 2.绝对定位（absolute） 3.相对定位（relative） 4.固定定位（fixed）三、层级关系示例：总结前言 CSS属性一共有x、y、z三条轴，但z轴只有使用了position属性时，z轴上的层级关系才体现出来，所以z-index这个属性只有定位元素才有。一、position是什么？ position 属性规定元素的定位类型。二、positi

css绝对定位分层,css定位position引发的层级关系问题详解

weixin_28698059的博客

08-03

917

position定位里的absolute，relative和fixedabsolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。relative：相对定位，相对自己原来的位置进行定位fixed：绝对定位，相对浏览器窗口进行定位(fixed定位会让元素一直处于浏览器某个位置，不会随着滚动条滚动而变化)由posi...

前端基础入门之css定位 position

热门推荐

LoveSummer

06-21

1万+

需求分析按照我们之前所学知识，可以怎么实现呢？应该来说不难，很容易实现我们分别给 box2 和 box3 添加了外边距之后，就可以达到需求效果当然也可以使用浮动来解决上述问题，但稍微麻烦一点不管怎样，问题也是显而易见。我们实际开发中，页面上的元素可能很多，这样改必然是牵一发而动全身那么仅仅靠我们之前学习的布局知识，不足以轻松应对这种场景那么就势必需要一个方便我们处理这种场景的办法，它就是定位呸！不是！糟老头子定位（position）定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用属

CSS|13 position属性

Catherinemin的博客

12-20

2228

position表示，主要用于实现对元素的定位。注意：在使用定位属性时，一定要配合来使用！left:表示定位的元素离左边多远right:表示定位的元素离右边多远top:表示定位的元素离上边多远bottom:表示定位的元素离下边多远。

css 定位position: absolute居中

blue_sky的博客

11-27

2784

这是个很小的点：只是为了方便使用 /*方式一*/ .main_center{ position: absolute; left:0; right:0; top:0; bottom:0; margin:auto; /*auto属性，相当于移到中心点*/ } /*方式二*/ .main_center{ position: absolute;...

css定位position引发的层级关系问题详解

01-21

position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left...首先我们要知道，css属性其实是一个立体空间有x，y，z轴，但是只有我们使用了position定位时，z轴上的层级关系才体现出来，即z-in

深究CSS定位position的常用技法

01-19

本文针对CSS常用的6个属性进行探究，大家一定会对这篇文章满意的。 1.position:static static属性是position的默认值，也就是说，当一个元素没有为其设定position属性时，它的默认值就是static。 2.position:...

CSS的三种使用方法

o_jj_o的博客

01-03

1185

属性(css样式) 写法属性名称=属性值（1）行间样式：（它只对当前的这个标签起作用）写在标签的style属性里面 <div style="width: 100px;height: 100px;background: green"></div> （2）内嵌式 <head> <meta charset="UTF-8"> ...

Css Color 属性

o_jj_o的博客

01-03

875

颜色是通过对红、绿和蓝光的组合来显示的。描述颜色： 1,英文关键字： red blue green… 2,十六进制代码：#c62828 0123456789abcdef 3,rgb: rgb(128,30,30) 4,rgba: rgba() # c6 28 88 十六进制代码其实可以分成三组 # ff 00 00 f00 rgba() rgb 颜色三原色 a ...

CSS 阴影

o_jj_o的博客

01-05

571

box-shadow: 盒子阴影（inset 向里走了内阴影()） X轴偏移量 Y轴偏移量模糊半径（可以负值）扩散半径 box-shadow:[inset] x y blur [spread] color 参数 inset：投影方式 inset：内投影不给：外投影 ...

边框属性 Border

o_jj_o的博客

01-03

523

边框 3个值 1、粗细单位：px 2、样式实线（solid）虚线 (dashed) 点线(dotted) ----拆分 border-width border-style border-color 1~4个值上右下左 3、颜色单词十六进制 rgb(128,30,30) rgba() a-不透明的 0~1的取值 ...

CSS 字体属性（Font）

o_jj_o的博客

01-03

477

文字（1）font-size 大小单位 px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化； em表示相对于父元素的字体大小。em是相对单位，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值（2）font-weight 粗细 bold 加粗 normal 正常（3）font-style 文字...

CSS 背景属性（Background）

o_jj_o的博客

01-03

373

背景 1、背景颜色 2、背景图片平铺 background-repeat: no-repeat repeat-x repeat-y 位置 background-position: x值 y值； right center bottom(y) left top(y) 正值负值选择照片特定的图像 3、滚动 background-at...

css定位position

07-28

CSS中的position属性用于控制元素的定位方式。根据引用\[1\]和引用\[2\]，position属性有五个值：static、relative、absolute、fixed和sticky。 - static：元素按照正常的文档流进行布局，不会受到position属性的...