CSS Position 属性值有哪些?

CSS Position属性值有:1、static,是position的默认值;2、fixed,生成固定定位的元素;3、absolute,生成绝对定位的元素;4、relative,生成相对定位的元素;5、inherit,继承父级属性值。

CSS Position 属性值有哪些?

1、position: relative;相对定位

不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性)

不会使元素脱离文档流(元素原本位置会被保留,即改变位置也不会占用新位置)

没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移)

提升层级(用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面,z-index只能在position属性值为relative或absolute或fixed的元素上有效。)  (两个都为定位元素,后面的会覆盖前面的定位)

立即学习“前端免费学习笔记(深入)”;

2、position: absolute;绝对定位

使元素完全脱离文档流(在文档流中不再占位)

使内联元素在设置宽高的时候支持宽高(改变内联元素的特性)

使区块元素在未设置宽度时由内容撑开宽度(改变区块元素的特性)

相对于最近一个有定位的父元素偏移(若其父元素没有定位则逐层上找,直到document——页面文档对象)

相对定位一般配合绝对定位使用(将父元素设置相对定位,使其相对于父元素偏移)

提升层级(同相对定位)

3、position: fixed;固定定位

fixed生成固定定位的元素,相对于浏览器窗口进行定位。

4、position:static:默认值

默认布局。元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

6、position: inherit

规定应该从父元素继承 position 属性的值。

推荐教程:《CSS教程》

以上就是CSS Position 属性值有哪些?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2885521.html

(0)
上一篇 2025年3月10日 20:40:48
下一篇 2025年2月27日 16:59:59

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • CSS文件的扩展名是什么?

    CSS文件的扩展名是“.css”,CSS是一种用来表现HTM或XML等文件样式的计算机语言,该语言不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 推荐视频教程:《html与CSS基础入门视频教程》 CSS 特点…

    2025年3月10日
    200
  • display:block属性的作用是什么

    css中的display是设置元素显示的方式,block是一块状元素的方式显示,inline是以内联元素的方式显示,none是不显示,块状元素会单独占据一样,其他元素跟他在同一行的会被迫换行,挤到下一行。 css中的display是设置元素…

    2025年3月10日
    200
  • block元素的特点有哪些

    block元素的特点有:1、总是在新行上开始;2、高度,行高以及顶和底边距都可控制;3、宽度缺省是它的容器的100%,除非设定一个宽度。 块元素特点:1.独占一行2.元素的宽高和内外边距都可以设置3.宽度如果不设置就是父级元素的100%常见…

    2025年3月10日
    200
  • style标签的作用是什么

    style标签的作用是用来说明所要定义的样式,style标签用于为HTML文档定义样式信息,在style元素里,可以指定HTML元素在浏览器里的呈现方式,style标签应放在head里。 定义及用法 标签用于为HTML文档定义样式信息。 在…

    2025年3月10日
    200
  • CSS中@import是什么意思?

    在CSS中@import是导入CSS样式表,这种方式通常会在CSS文件中使用,这样做的好处是,可以把多个样式表导入到一个样式表中,从而在页面里面只需要导入一个样式表即可。 视频教程推荐:《css视频教程-玉女心经版》 引入CSS的方法有两种…

    2025年3月10日
    200
  • CSS实现轮播图效果(附代码)

    css/ck_htmledit_views-211130ba7a.css”/> CSS实现轮播图效果(附代码) 理论基础 CSS3 animation 属性和 @keyframes 规则 主体思想 1、准备相同大小的多个图…

    2025年3月10日
    200
  • CSS盒子模型是什么意思?

    CSS盒子模型都具备内容content、内边距padding、边框border、外边距margin这些属性,这些属性可以用日常生活中的常见事物“盒子”作一个比喻来理解,所以称作为盒子模型。 css (cascading style shee…

    2025年3月10日
    200
  • CSS 布局之两端布局实现

    最近在进行开发的过程中,有遇到两端对齐的布局,是按照百分比来进行布局的,之前有用过flex布局,但是flex布局,使用两端布局的时候,会出现一切bug。比如,下面的是动态生成的时候,三列或者多列就会把下面的列表分布在两边。虽然可以解决,但是…

    2025年3月10日
    200
  • css中一个冒号和两个冒号分别代表什么?

    一个冒号是伪类,两个冒号是伪元素。 (推荐学习:css快速入门) 伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。 伪元素所控制的内容和一个元素…

    2025年3月10日
    200
  • display:inline是什么意思?

    display:inline的意思是设置对象做为行内元素显示,inline是内联对象的默认值,而一般用的div是块级元素,默认display属性是block,但将div的display设置为inline的话,则多个div显示在一行。 dis…

    2025年3月10日
    200

发表回复

登录后才能评论