定位position

最新推荐文章于 2023-07-26 15:01:55 发布
最新推荐文章于 2023-07-26 15:01:55 发布
阅读量317 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： h5 css 文章标签： position absolute relative fixed
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/luckyGirlIT/article/details/95053386

绝对定位的使用场景
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

固定定位的特性
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

在这里插入图片描述
在这里插入图片描述
position：
relative 相对位移
top:正数是向下移动
left:正数是向右移动
在这里插入图片描述
在这里插入图片描述
absolute属性值
偏移设置： left、right、top、bottom
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
元素位置发生偏移后，它原来的位置不会被保留下来
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML 属性 Position
栖竹
09-08 2281
定位 (position) 元素的定位属性 元素的定位属性主要包括定义模式和边偏移两部分。 1、边偏移 边偏移属性 描述 top 顶端偏移量，定义元素相对于其父元素上边线的距离 right 右侧偏移量，定义元素相对于其父元素右边线的距离 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 left 左侧偏移量...
CSS定位position总结（超详细哦！）
热门推荐
weixin_52625590的博客
08-01 3万+
开始学习css页面布局时，先接触到的有 **标准流 或 浮动**，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。 例如： **场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 这个时候我们就需要学习新的布局方法了——`定位（position）`...............
定位(position)
gorgeoustudy的博客
07-07 343
元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。 1、边偏移 top 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧偏移量，定义元素相对于其父元素右边线的距离 2、定位模式(定位的分类) st...
详解css粘性定位position：sticky问题采坑
12-14
CSS中的`position: sticky`是一种混合定位方式，它结合了`relative`和`fixed`的特点。在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕...
理解CSS浮动float、定位position
09-27
浮动(float)和定位(position)是CSS布局中的两个关键概念，它们在网页设计中扮演着重要角色，用于控制元素的位置和排列方式。 一、浮动(float) 浮动最初设计的目的是为了实现文本环绕图片的效果，但后来发展成为一种...
css定位position引发的层级关系问题详解
01-21
position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。 relative：相对定位，相对自己原来的位置...
JS中定位 position 的使用实例代码
10-19
JS中的position属性是用来控制元素定位的，它有五种不同的定位类型：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和sticky（粘性定位）。在网页布局中，利用position属性...
position定位
m0_62351590的博客
01-07 8821
position定位都有哪些: position的含义是指定位类型，取值类型可以有：static、relative、absolute、 fixed、inherit、和sticky,这里sticky是css3新发布的一个属性。 1.position: static(默认） static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）.元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会
定位（Position）
yxiangy的博客
08-01 904
定位（Position）
定位 position 属性
m0_61940160的博客
07-26 149
有五个不同的位置值： static relative fixed absolute sticky同。
定位position详解(一)
jlin991的博客
01-20 3845
0.简介首先记得p h1 div 等是称为块级元素，它们会生成”块框”。 而strong em span等是行内元素，它们生成“行内框”CSS 有3种基本的定位机制：浮动 绝对定位 普通文档流。 除非指定，否则所有框都在普通流中定位！普通流：块级框一个一个垂直排列，由元素在HTML中的位置决定。对于行内框： 水平padding 内边距，margin外边距，border可以调整他们的水平间距
面试必问——定位position
qq_45018844的博客
01-04 359
定位的属性 static(默认值） absolute（绝对定位） relative（相对定位） fixed（固定定位） static 是position的默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index） absolute绝对定位 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 例子： <!DOCTYPE
15、定位（Position）
十分钟学会写博客
07-05 1762
定位（Position） 相关概念 定位组成 使用 一、相关概念 1.1、什么是定位？ 定位：将一个元素定在某一个位置（坐标）。 1.2、为什么要使用定位？ 定位可以让多个块级元素在一行显示 定位可以让一个元素在某一个盒子内固定在任意位置，且可以覆盖其它元素。 二、定位组成   定位由两个基本元素组成：定位模式（position）和边偏移（top、right、bottom、left），其中定位模式决定了元素在文档中的定位方式，而边偏移则决定了元素的最终位置（坐标） 2.1、定位模式（positio
定位position（5种方式）
AnnGreen的博客
06-23 6101
原文链接（自己有写了几个例子）：http://c.biancheng.net/css3/position.html CSS 中的 position 属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position 属性有 5 个可选值，分别对应 5 种不同的定位方式，如下所示：static 是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响
CSS 定位(position) （三）
林彬的专栏
06-01 369
叠放次序（z-index） 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。 在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性， 其取值可为正整数、负整数和0。 比如： z-index: 2; 注意： z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。 如果取值相同，则根据书写顺序，后来居上。 后面数字一定不能加单位。 只有...
position的五种定位方式介绍、实例演示
weixin_43183219的博客
12-25 6249
position的静态定位，相对定位，绝对定位，粘性定位，固定定位介绍及演示
css定位position
07-28
CSS中的position属性用于控制元素的定位方式。根据引用\[1\]和引用\[2\]，position属性有五个值：static、relative、absolute、fixed和sticky。 - static：元素按照正常的文档流进行布局，不会受到position属性的影响。 - relative：元素相对于其在正常文档流中的位置进行定位。引用\[3\]中的示例展示了相对定位的效果，其中.content_1元素相对于其在正常文档流中的位置进行定位。 - absolute：元素相对于其最近的非static定位的父元素进行定位。如果没有非static定位的父元素，则相对于文档的根元素进行定位。引用\[2\]中的示例展示了绝对定位的效果，其中.content元素相对于.container元素进行定位。 - fixed：元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。 - sticky：元素在滚动到特定位置时变为固定定位，直到滚动回到指定位置之前保持固定定位。 总结来说，position属性用于控制元素的定位方式，可以通过设置不同的值来实现不同的效果。 #### 引用[.reference_title] - *1* *2* *3* [CSS Position 定位](https://blog.youkuaiyun.com/Coxhuang/article/details/103319551)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值