CSS 中的position

最新推荐文章于 2025-05-02 10:08:09 发布
原创 最新推荐文章于 2025-05-02 10:08:09 发布 · 359 阅读 · 1 ·
CC 4.0 BY-SA版权
感谢您的阅读，本文为博主原创文章，未经博主允许不得转载。
文章标签：

#css

本文深入讲解前端开发中Position属性的应用，包括初始化状态、相对位置(relative)及绝对位置(absolute)的使用技巧，帮助读者理解并掌握如何精确控制网页元素的位置。

学习前端position：

在页面布局的时候，经常会设置div的位置大小样式，通常通过使用position,可以找到position对应的属性

 例子：

一：初始化状态：

二：添加相对位置：relative

三：添加绝对位置：absolute

四：为了避免脱离了大框，脱离了常规流 可以修改如下：

参考链接：CSS--position  CSS-demo

CSS中position属性之fixed实现div居中
09-03
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。`position`属性有多个值，如`static`、`relative`、`absolute`和`fixed`，每种都有其特定的用途。在这个场景中，我们主要关注的是...
谈谈你对css中position五个属性的理解
09-24
position有五个属性： static | relative | absolute | fixed | inherit，也许你看到这个标题觉得很简单，确实这是一篇关于CSS中Position属性基础知识的文章，但是关于Position的一些细节也许你不了解，感兴趣的朋友...
关于CSS中position属性和overflow属性的使用小结
学无止步的博客
08-18 3506
关于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
xiaosheng
10-15 209
css中的相对定位是比标准流高了一级，是浮动在标准流上面，脱离标准流，而且是占着位置的，而绝对定位也是飘起来，但绝对定位是不占位置的，脱离标准流...
CSS中的position属性
一点记录，一点分享
04-15 5639
CSS的position属性：static、relative、absolute、fixed各值的区别，特别注意margin折叠的现象
CSS基础中属性position的使用方法（新手入门到精通）
2401_83607690的博客
05-02 2378
css中position属性详解，适合新手小白，前端学习者，面试复习者
css中position:fixed实现div居中上下左右居中
09-25
在这段CSS代码中，首先设置了.dialog类的position属性为fixed，确保该DIV相对于视口定位。接着，通过设置top: 50%和left: 50%属性，将DIV元素的左上角定位到视口的中心位置。然后，通过设置margin负值来调整DIV元素...
深入理解css中position属性及z-index属性(推荐)
01-19
在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute。最后将会介绍...
CSS基础：position定位的5个类型详解！
u013179804的博客
04-21 6006
CSS 中的positionstatic：默认值，relative：相对定位，absolute：绝对定位，fixed：固定定位，sticky：粘性定位。因为positiontop：距离定位父元素或包含块顶部的距离。right：距离定位父元素或包含块右侧的距离。bottom：距离定位父元素或包含块底部的距离。left：距离定位父元素或包含块左侧的距离。这四个方位属性可以使用像素(px)、百分比(%)、em 等单位来指定距离，正负值皆可以。
CSS Position
03-15
NULL 博文链接：https://sugongqing.iteye.com/blog/323093
前端 position定位
qq_44327851的博客
12-25 1417
绝对定位的元素的位置是相对于它最近的已定位祖先元素（定位属性值为除 "static" 以外的任何值），如果没有祖先元素是已定位的，则相对于文档的 body 元素。注意：当相对定位的元素发生偏移后，原先在这个元素下面的其他元素会被覆盖，但是从文档流的角度，相对定位的元素仍然在原来的位置上，因此，后面的元素不会根据它进行布局。当元素在滚动到特定位置时，它将根据设置的 "top", "right", "bottom", "left" 值进行定位，直到滚动到另一个设定的位置，然后保持其位置不变。
前端页面的定位(position)
qq_52470307的博客
04-18 2295
定位（position）、偏移
前端基础---定位 position
xyue_的博客
04-22 403
定位 pisition 一、静态定位 static （默认） 二、相对定位 ralative 1、参考物 定位前的位置 2、特点 （1）不影响元素本身特性 （2）元素不脱离文档流 （3）相对于原位置进行偏移 三、绝对定位 absolute 1、参考物 最近使用了定位的父级 2、特点 （1）元素脱离文档流 （2）行元素支持所有css样式 （3）块元素内容撑开宽高 （4）清除子级的浮动 四、固定定位 1、参考物 浏览器窗口 2、特点 （1）元素脱离文档流 （2）清除子级的浮动 五、作用 1、可以使用偏移描述
前端学习之定位（position）
no pains,no gains
05-07 4200
前面说过浮动，关键在一个"“浮”上面，而定位，关键则在于一个"位"上面。 前端学习之浮动 PS:定位在CSS中算是数一数二的难点，但是，务必要学好它。我们的CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触定位，反而要爱上它，它可以让我们工作更加轻松哦~ 为什么要用定位？ 如果要实现某个东西能够随便在一个盒子里自由随意移动、或压着某个元素、或超出某个盒子等等，这一类用标准流或者...
web前端css--position
amanre的博客
11-20 706
position的基础定义以及使用方式，对position进行剖析。
前端中的几个position
imapple0420的博客
09-22 565
最近一只大四狗在准备面试，所以整理一波概念。 static：无特殊定位，对象遵照HTML的定位规则 absolute ：将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性，相对根元素进行绝对定位（其根元素可以自己设定，如果其父元素设置为relative,那么根元素就是其父元素，如果其爷爷元素设置为relative，那根元素就是其爷爷元素，以此
【前端css】position定位
weixin_43872912的博客
03-03 557
在这个案例中4是粘性定位sticky，所以在向上滚动的时候不会出屏幕，3是absolute脱离了文档流，所以以前的4到3文档流位置。3、absolute 绝对定位，别的元素会挤占其原本空间，是相对于他的包含他的元素而言的，就是父级元素而言。如果选择的是这个定位，那么css中的left、right、bottom、top不会发生作用。他是针对浏览器边框的，正常情况下在文档流位置，当要滚动出浏览器之后，被限制在定位位置。2、relative 相对定位，相对原来的位置，别的元素不会挤占其原本空间。
【前端基础知识】css position
Dai的博客
02-08 889
【前端基础知识】css position
css中position使用方法
最新发布
09-18
CSS 中的 position 属性指定了元素的定位类型，其值有 5 种，分别为 static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（窗口定位）和 sticky（粘性定位），不同值的使用方法和特点如下： - **static（静态定位）**：这是 position 属性的默认值，元素按正常文档流排列，无法通过 top、left 等属性调整位置。可以省略不写 `position: static;` ，例如： ```css .box { position: static; /* 可省略不写 */ } ``` - **relative（相对定位）**：元素保留原位置，根据自身原始位置偏移，不影响其他元素布局，标签显示模式不变。可以使用 top、left 等属性来设置偏移量，例如： ```css .box { position: relative; top: 20px; /* 向下偏移20px */ left: 30px; /* 向右偏移30px */ } ``` - **absolute（绝对定位）**：元素会脱离正常文档流，相对于最近的已定位祖先元素（即 position 值不为 static 的祖先元素）进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）定位。 ```css .parent { position: relative; /* 父元素设置相对定位 */ } .child { position: absolute; top: 50px; left: 50px; } ``` - **fixed（固定定位）**：元素脱离正常文档流，相对于浏览器窗口进行定位。无论页面如何滚动，元素都会固定在指定的位置。 ```css .fixed-element { position: fixed; top: 20px; right: 20px; } ``` - **sticky（粘性定位）**：元素在屏幕范围内时，按照正常文档流进行布局，当滚动到屏幕范围之外时，会固定在指定的位置，就像 fixed 定位一样。它需要结合 top、left、right 或 bottom 属性一起使用。 ```css .sticky-element { position: sticky; top: 0; } ```
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

邢美玲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值