CSS各定位之间的区别

最新推荐文章于 2024-05-20 22:08:52 发布
最新推荐文章于 2024-05-20 22:08:52 发布
阅读量313 收藏 1
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangshen_a/article/details/128263237
版权

1. 静态定位：static
        特点：默认文档流定位

2. 相对定位：relative
        特点：不脱离文档流 相对于自身在浏览器中的位置定位

3. 绝对定位：absolute
        特点： 1. 脱离文档流 原先位置不保留
                    2. 默认定位元素，无论有没有祖先元素，相对于body定位
                    3. 祖先元素设置了定位,相对于祖先元素定位（就近原则）

4. 固定定位： fixed
        特点：1.脱离文档流 原先位置不保留
                   2.相对于浏览器视口区域

5. 粘滞定位：sticky
        特点：1. 不脱离文档流 
                   2. 没有达到阈值前相对定位，达到阈值就是固定定位
 

Pinia-
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
CSS中的四种定位区别详解
01-21
我们都知道，前端开发里面的CSS中常用的定位方式有 普通定位，相对定位，绝对定位、固定定位定位这四种。 但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别，在使用的时候都很不灵活，要知道，想做好网页布局，这4个定位方式都是精髓呀，学好定位布局，前端开发轻轻松松！ 那么今天我们就来讲解一下CSS中这4种定位的作用和区别！帮助大家搞清楚这4种布局的妙用！ 一、普通定位(Static) 在我们的开发过程中，除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内
CSS五种定位的区别
MixedSignals的博客
02-22 483
CSS五种定位的区别 CSS定位是非常重要的一种功能，可以将网页中的内容放在指定的位置，使网页布局工整美观。定位属性position一共有5个值，分别是static、relative、fixed、absolute、sticky。根据情况的不同，使用的属性值也大多不同，选择最合适的方法才能有最好的效果。它们的区别如下： ①static;这是定位的默认值，写和不写都一样，相当于没有定位，本身在哪就在那...
CSS定位
热门推荐
Ma_jiao的博客
07-14 1万+
定位 是布局中的重要属性，一般用于盖压效果与位置相关效果。 position 给元素设置整体定位，必须同时存在position属性和偏移量属性。 属性值 说明 relative 相对定位 absolute 绝对定位 fixed 固定定位 偏移量属性 定位的元素，在水平或垂直方向需要偏移的距离。 水平：left、right 垂直：top、bottom relstive(相对定位) 参考这个元素原始应该加载的位置。 相对定位没有脱离原始状态（标准流，浮动），它不会让出原来占有的位
CSS中5种定位方式的区别
m0_53946749的博客
03-11 1339
学习总结之css的5种定位方式及其区别
CSS——CSS定位※ ( position )
流楚丶格念的博客
07-03 4435
文章目录定位(position)为什么要用定位？元素的定位属性静态定位(static)相对定位relative(自恋型)绝对定位absolute (拼爹型)1.父级没有定位2.父级有定位3.子绝父相 ※※绝对定位的盒子水平/垂直居中代码示例固定定位fixed(认死理型)叠放次序（z-index）四种定位总结定位模式转换顺丰案例 定位(position) background-position 背景定位 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 PS: 定
css中的三种基本定位机制
12-01
css中的三种基本定位机制 a.普通文档流 b.定位：相对定位 　绝对定位 　固定定位 c.浮动 1.普通流中，元素位置由文档顺序和元素性质决定，块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin值计算得到，...
CSS网页布局教程:绝对定位和相对定位
12-07
本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。 CSS网页布局教程:...
CSS定位的教程
12-13
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“距离”。只要不是float和绝对定位方式布局的，都在文档流里面。 2.position属性介绍 static，默认值。位置设置为static的元素，它始终...
CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
01-08
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的...
Web开发——HTML&CSS
最新发布
一切皆是定数的博客
05-20 157
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
css超出部分省略（单行、多行，多种方法实现）
阿乐的博客
05-14 403
缺点:使用了私有属性。
css sprites如何使用
codedadi的博客
05-18 389
注意：确保在定位图标时考虑到大图像的尺寸和每个图标的尺寸。例如，如果每个图标都是32x32像素的，并且它们在大图像中水平排列，那么第一个图标的background-position是0 0，第二个图标的background-position是-32px 0，依此类推。在CSS中，定义.icon类以设置所有图标的通用样式（如大小、背景图像等），并为每个图标定义特定的background-position。/* 图标2在大图像中的位置（假设每个图标宽度为32px） *//* 图标1在大图像中的位置 */
实用css整理
qq_37004501的博客
05-17 375
一般用于特殊时期，网页变灰，只需要给body标签添加这行样式代码。给body标签设置这个属性样式，改变角度看看效果吧。
css: 动态设置网格线
1111111111
05-14 343
唯一的遗憾是，宽度和高度本来想设置为数字类型，通过input-number输入，然后在css里拼上‘px’，像下面这种写法，会报错，所以只能把px单位放在输入框里。上面的html和下面的css不在同一个vue文件里，虽然变量名不同，一个是formData，一个是designData，所指向的对象是相同的。注意：style里不要写lang="scss" 不然会一直报错。另外还有一个小小的问题，页面缩放的时候，网格线会消失。把网格颜色，宽高和透明度做成可配置项。
CSS常用滤镜效果
不负光阴不负自己，不负被爱不负所爱 ​
05-13 343
CSS 提供了多种滤镜效果，可以通过filter属性应用于 HTML 元素。将图像转换为灰度图像。给图像应用色相旋转。值以度为单位。增加或减少图像的饱和度。增加或减少图像的亮度。增加或减少图像的对比度。反转图像的颜色。给图像应用模糊效果。
css实现li中文字换行对齐
weixin_52268321的博客
05-17 124
【代码】css实现li中文字换行对齐。
在 CSS 中使用 text-emphasis 来增强文本的趣味性
前端全栈开发者
05-14 330
您可以更改颜色、大小、字体，甚至添加阴影和轮廓等效果。但最近，我了解到一个我以前没有听说过的时尚 CSS 属性，它非常棒！属性是一种有趣的方式，可以增加对文本的强调，并可用于为您的设计增添趣味。大多数现代浏览器都支持它，因此您可以立即开始使用它来使您的文本脱颖而出！属性组合的简称，可以为文本添加强调标记。这些标记可用于以各种方式突出显示文本，例如在文本上方或下方添加点、圆、双圆或文本。您甚至可以使用表情符号来强调文本。您也可以使用字母来强调文本。这将在文本顶部添加一个点，如下所示。
详解CSS（二）
Romised的博客
05-20 734
背景属性、背景颜色、背景图片、背景平铺、背景位置、背景尺寸、圆角矩形、元素的显示模式、行内元素/内联元素（Inline element）、块级元素（Block-level element）、行内块元素（Inline-block element）、行内元素和块级元素的区别、改变显示模式、盒模型、边框、边框会撑大盒子、内边距、复合写法、外边距、复合写法、块级元素水平居中、去除浏览器默认样式
CSS粘性定位怎么使用
07-12
CSS粘性定位是一种介于相对定位和固定定位之间的定位方式，它可以使元素在滚动时保持在指定位置。要使用粘性定位，可以按照以下步骤进行操作： 1. 首先，在CSS中选中要应用粘性定位的元素。可以使用类名、ID或标签...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Pinia-

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

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

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

打赏作者

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

抵扣说明：

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

余额充值