CSS position 定位

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

#css

本文详细介绍了CSS中的四种定位方式：static、fixed、relative和absolute。解释了每种定位方式的特点及如何影响元素的位置，并提到了元素之间的重叠问题及z-index属性的作用。

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

Static 定位
     HTML元素的默认值，即没有定位，元素出现在正常的流中。
     静态定位的元素不会受到 top bottom left right 影响

Fixed 定位
     元素的位置相对于浏览器窗口是固定位置。即使 窗口滚动它也不会移动。
     Fixed定位是元素的位置与文档流无关，因此不占据空间；
     Fixed定位的元素和其他元素重填；

relative 定位
     相对其正常位置定位。
     相对定位元素经常被用来作为 绝对定位元素的容器块；

absolute 定位
     绝对定位元素的位置 相对于最近的已定位父元素。如果没有这样的父元素，那么它的位置相对于<html>  
     absolute定位是元素的位置与文档流无关，因此不占据空间；
     absolute定位的元素和其他元素重填；

重叠的元素
      元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。
      z-index 属性指定了一个元素的堆叠顺序  
CSS Position定位（详解网页中的定位属性）
百赢出品，必属精品
04-25 2148
文档流（Document Flow）：HTML元素默认按照文档流从上到下依次排列，形成页面布局。定位：定位是指通过CSS将元素摆放到指定位置的技术，不受文档流的限制。定位属性（position）用于指定元素的定位方式，可选值包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。相对定位（Relative Positioning）元素相对于其正常位置进行定位，通过设置top、right、bottom和left属性进行偏移。
CSS 定位
whuhewei的博客
03-05 283
position（定位）属性指定了元素的定位类型。元素可以使用顶部，底部，左侧和右侧属性进行定位。然而，除非是先设定position属性，否则这些属性（top/bottom/left/right）无法工作。不同的定位方法有不同的工作方式，下面对各种定位方法进行介绍： static定位 HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到top,bottom,left,ri...
CSS Positioning(定位)
weixin_30697239的博客
06-07 118
Positioning(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法. 有四种不同的定位方法。 Static 定位 HTML元素的默认值，即没有定位，元素出...
绝对定位与相对定位
Mephisto180502的博客
04-27 505
CSS Position（定位） 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box）...
CSS之position定位
qq_33554950的博客
02-27 362
CSS之position定位position属性值position:sticky粘性定位的计算规则层次滚动效果实现 position属性值 absolute：绝对定位，相对于static定位以外的第一个父元素进行定位 fixed：绝对定位，相对于浏览器窗口 relative：相对定位，相对于正常位置 static：默认值 inherit：从父元素继承 sticky：当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed （注：top或left必须要有明确的计算值，否则fixed的
css中的position定位详解
wdyliuxingfeiyang的博客
07-31 408
css中的position定位详解 position属性指定了元素的定位类型。 position属性的5个值：static，relative，fixed，absolute，sticky; 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 注： postion: 1、absolute(绝对定位)，其位置相对于最近已定位的父元素，如果元素没有已定位的父元素那么它的位置相对于 2、static(默认..
css position 定位
01-19
如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的...
全面剖析CSS Position定位
09-24
CSS Position定位是CSS布局中的重要概念，它决定了元素在页面中的具体位置。定位方式有多种，包括静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)以及继承定位(inherit)。每种定位方式...
[css] 说说你对相对定位、绝对定位、固定定位的理解
歌谣的博客
02-01 378
[css] 说说你对相对定位、绝对定位、固定定位的理解 position 属性指定了元素的定位类型。 position 属性的五个值： static（默认值） relative（相对定位） fixed（固定定位） absolute（绝对定位） sticky（粘性定位） relative 相对定位：相对自身元素的原来进行定位。 移动相对定位元素，但它原本所占的空间不会改变。 相对定位元素经常被用来作为绝对定位元素的容器块。 用途： 第一个，为微调元素的位置 第二个，做绝对定位的参考(父相子绝) abs
web前端－CSS Positioning(定位) －018
helloMr_wo的博客
10-10 891
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法. 有四种不同的定位方法。Static 定位HTML元素的默认值，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到top,
前端实习面试提问
L_bic的博客
05-04 415
CSS1.盒模型；box-sizing属性 语法box-sizing: content-box|border-box|inherit:值说明content-box这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外border-box指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指...
CSS相对定位和绝对定位详解
热门推荐
蝈蝈的博客
08-25 1万+
相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种： 值 描述 absolute 使元素绝对定位，相对于static定位以外的最近的一个祖先元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative 使元素相
CSS中的绝对定位与相对定位
a125366161的专栏
12-10 351
层级关系为： 效果图： 为改变参照物（橘色框）后的效果 层级关系为： 效果图： 参照物为最顶级的元素情况。 层级关系为： 效果图：   仅使用margin属性布局绝对定位元素的情况 此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素
HTML的position定位理解
zhh0310235的博客
08-07 1741
HTML的position定位有5种属性。 1、static 定位：没有定位，遵循文档流等先后顺序。 2、fixed 定位：固定到当前浏览器窗口位置，用top:20px;right:30px;等属性进行控制，固定在浏览器窗口距上边20像素，右边30像素的位置。 3、relative定位：相对于它正常位置的轻微距离平移，position:relative; left:-20px;相对与没有定位...
CSS总结(3)
WildKingxue的博客
08-20 185
一.CSS尺寸 CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。 width属性设置元素的宽度。 height属性设置元素的高度。 line-height属性设置行高。 二.CSSDisplay(显示)与Visibility(可见性) 1.Display显示 display属性设置一个元素应如何显示。 display:none--隐藏 display:block--显示 2.Visibility可见性 visibility属性指定...
css之position(定位)的理解
weixin_34405332的博客
08-11 114
css中的position（定位）有四个属性，比较容易搞混，这里做一个小结来区分方便以后的使用。 position的四个属性值：1.static 2.fixed 3.relative 4.absolute 1.static定位：position的默认值，一般不设置position属性时，元素会按照正常的文档流进行排列。静态定位的元素不会受到top, bottom...
前端笔试所获(css盒子)
qq_45149720的博客
10-16 214
CSS 盒子模型(Box Model) 1.Margin(外边距) - 清除边框外的区域，外边距是透明的。 2.Border(边框) - 围绕在内边距和内容外的边框。 3.Padding(内边距) - 清除内容周围的区域，内边距是透明的。 4.Content(内容) - 盒子的内容，显示文本和图像。 position static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。 fixed 定位 元素的位置相对
Next.js 样式：CSS 模块、Sass 等
最新发布
zimin的专栏
08-07 749
Next.js 是一个基于 React 的全栈框架，其灵活的样式系统支持多种方案，包括 CSS 模块、Sass、Tailwind CSS 和 CSS-in-JS。这些方案各有特点，适用于不同场景：CSS 模块提供局部作用域，避免样式冲突；Sass 提供变量、嵌套等高级功能；Tailwind CSS 通过实用类加速开发；CSS-in-JS 实现动态样式。无论是在 App Router（app/ 目录）还是 Pages Router（pages/ 目录），Next.js 都提供了无缝集成这些样式方案的能力。
css position定位
04-02
### CSS `position` 属性使用指南 #### 一、CSS 定位概述 CSS 中的 `position` 属性用于定义元素框相对于其正常位置或其他容器的位置。通过设置不同的定位类型，可以精确控制 HTML 元素在页面中的布局[^1]。 --- ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值