Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS position属性

CSS position属性

作者头像
全栈程序员站长
发布于 2022-01-11 08:44:17
发布于 2022-01-11 08:44:17
8050
举报

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

CSS在position位置信息要素用于表示属性。

有三个取值:static, absolute, relative。假设元素没有明确的配置position属性,元素默认position 值至static。

1、static:这是表示该元素依照排列和嵌套的顺序和规则应该在的位置,此时设置top,right,left, bottom属性是无效的。

2、absolute:位置參考点是离其近期的配置了position属性值为非static的父节点元素,假设其全部父节点都没有显式配置position属性。则以浏览器窗体的位置为參考。此时设置top,right,left, bottom属性值有效。

3、relative:位置參考点是其原有位置(该元素position配置为static的位置)。此时设置top,right,left, bottom属性值有效;

z-index属性用于指定三维坐标(x,y,z)中z坐标的值,该值默认是0,能够设置为正数。也能够设置为负数。值越大,表示在z轴方向越靠前。

注意:该属性必须在元素配置了position属性值至relative/absolute的前提下是有效的。

版权声明:本文博客原创文章。博客,未经同意,不得转载。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/117158.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
css 布局之 4种 position 布局讲解
left,top 属性可以理解为 div 左上角为基准移动 right,bottom 属性可以理解为 div 右下角为基准移动
Gorit
2021/12/08
9080
css 布局之 4种 position 布局讲解
【CSS】布局属性:position
前面说到,被设置了float的元素无法使用left、top、right、bottom等位置属性。 那么什么情况下可以用位置属性呢?
毛大姑娘
2021/04/26
5500
web前端技术讲解之CSS中position的定位技术
使用position定位有四种方式,分别为absolute、relative、static、fixed,static是静态定位,也为系统自动定位。下面主要分析其他三种定位方式的特点。
全栈程序员站长
2021/06/22
9140
web前端技术讲解之CSS中position的定位技术
CSS魔法堂:Position定位详解
一、Position各属性值详解                       1.  static :默认值,元素将按照正常文档流规则排列。   2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left、top、right和bottom的CSS规则来改变元素的位置。        注意点:[a]. 元素原来位置将保留,不被其他元素所占据;                      [b]. 当使用left,top改变元素位置时,元素将以原来位置的border外边框的左上角作为
^_^肥仔John
2018/01/18
5790
带你走进CSS定位详解
语法:z-index:auto | number 取值:auto:默认值,number:无单位的整数值,可负数。
达达前端
2019/07/03
4170
带你走进CSS定位详解
深入CSS,让网页开发少点“坑”
 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Stacking Context等高级特性。让你更深入了解CSS。 CSS 优先级 优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。如果给一个P标签增加一个类(Class),运行后Class 中的部分属性并未发生改变,及CSS选择器存在优先级问题。 选择符优先级 常见的选择器种类: 内联样式
葡萄城控件
2018/01/10
8960
深入CSS,让网页开发少点“坑”
css position:static 的使用
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可以通过z-index进行层次分级
tianyawhl
2019/04/04
9010
css position:static  的使用
(2019)[前端]面试题[10]:CSS display和position的属性值有哪些?
题外话:新网站( https://www.lzpan.com )懒盘,百度云、蓝奏云资源搜索,欢迎访问。
无道
2019/11/13
1.5K0
(2019)[前端]面试题[10]:CSS display和position的属性值有哪些?
前端基础——CSS+DIV布局
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/details/40559403
DannyHoo
2018/09/13
2.5K0
前端基础——CSS+DIV布局
CSS面试题
2.利用css3新增属性transform: translate(-50%,-50%);
全栈程序员站长
2022/09/04
4270
CSS面试题
css属性详解
一、字体属性 字体   font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 大小   可以通过font-size来说设置字体大小的像素值,如果设置成inherit表示继承父元素的字体大小值。 p { font-size: 16px; } 字重(粗细)  
人生不如戏
2018/04/12
2.1K0
css属性详解
css3的一些属性--position
定位:任何元素都可以定位 position:absolute;元素放置在你想的任意位置 不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。 position:relative; 相对定位元素会相对于它在正常流中的默认位置偏移 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通
wust小吴
2019/10/31
4940
Css 详细解读定位属性 position 以及参数
position 定位属性,是CSS中非常重要的属性。除了文档流布局,就是定位布局了。本来我对这个问题没有放在心上,毕竟写了这么多年的css,对position的各类使用是烂熟于心的。但是今天突然发现,居然很多人都不清楚position参数。因此,特地写这篇博文,详细解读一下position 以及参数。
FungLeo
2022/05/05
1.5K0
Css 详细解读定位属性 position 以及参数
五. css 布局之 position(定位)
包含块( containing block ) 正常情况下: 包含块就是离当前元素最近的祖先块元素,
小海怪的互联网
2020/10/26
2.2K0
[CSS] 对定位的深入理解与应用
注意:绝大多数情况下,相对定位,会与绝对定位配合使用。 **原因:**绝对定位的元素(即设置了 position: absolute; 的元素)相对于其最近的一个已定位的祖先元素进行定位。如果没有已定位的祖先元素,它将相对于浏览器窗口(即 body 元素)进行定位。 通过将父元素设置为相对定位(position: relative;),而将子元素设置为绝对定位(position: absolute;),可以使子元素的定位基于父元素,而不是整个页面。这使得布局更具可控性和可预测性。
DevKevin
2024/07/25
1460
[CSS] 对定位的深入理解与应用
css属性及定位操作
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。
全栈程序员站长
2022/07/21
2.5K0
css属性及定位操作
前端学习(14)~css学习(八):定位属性
如果想做“压盖”效果(把一个div放到另一个div之上),我们一般不用相对定位来做。相对定位,就两个作用:
Vincent-yuan
2020/03/19
9650
【前端】CSS : position
正常的布局行为,即元素在文档常规流中当前的布局位置。此时top, right, bottom, left和 z-index 属性无效。
Gavin-ZYX
2019/03/04
1.1K0
【前端】CSS : position
【说站】css中position常见的四个属性值
一般来说,我们不需要特别声明它,但有时当我们遇到继承时,我们不愿意看到元素继承的属性影响本身,所以我们可以使用Position:static取消继承,即恢复元素定位的默认值。设置为static的元素总是位于页面流给出的位置(static元素会忽略任何top、bottom、left或right声明)。一般不常用。
很酷的站长
2022/11/23
8850
【说站】css中position常见的四个属性值
浮动清楚浮动及position的用法
static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。
IT人一直在路上
2019/09/18
2.2K0
相关推荐
css 布局之 4种 position 布局讲解
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档