css中定位的三个常用值分别是什么?

css中定位的三个常用值分别是什么?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

在CSS中,定位的三个常用值分别:

  • position:relative(相对定位)

  • position:absolute(绝对定位)

  • position:fixed(固定定位)

position:relative(相对定位)

相对自身原来位置的定位,不脱离文档流。

如果以前没有设置position或者position值为static,那么设置relative后,元素的left,right,top,bottom的位置参照自身原来的位置进行移动,并且可以通过z-index进行层次分级。

position:absolute(绝对定位)

脱离文档流的定位。定位参照物为自己的父级,但是自己的父级必须拥有position属性(父级position属性为static也不行,必须为absolute,relative,fixed中的一个)。如果自己的父级没有设置position属性,会一直向上寻找有position属性且不为static的的祖先元素,直到body元素。

通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。

position:fixed(固定定位)

这个属性是元素以相对浏览器窗口为基准进行定位的,无论怎样移动你的滑动条,它都会固定在相对于浏览器窗口的固定位置,另外要注意,它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top,bottom,left,right也是相对于浏览器窗口而言的。

可通过z-index进行层次分级。

CSS定位的应用及注意事项

A:相对定位(position: relative):如果对某一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直(或水平)位置(top,right,bottom,left四值),让这个元素"相对于"它的起点进行移动。

注:设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留;

B:绝对定位(position: absolute):绝对定位使元素的位置与文档流无关,所以不会占用空间。与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

注:设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框;

CSS中定位的层叠分级:

z-index: auto | namber;
  • auto 遵从其父对象的定位

  • namber 无单位的整数值。可为负数

更多CSS相关知识,可访问 CSS教程

以上就是css中定位的三个常用值分别是什么?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    2010年底DIY硬件总结和安装参考

    2010年底DIY硬件总结和安装参考,,它似乎只是一眨眼的功夫从过去的最后一眼。看看现在的岗位似乎就在昨天,但看看当年的内容是真的走了,如果

    lol常用设置|lol有用的设置

    lol常用设置|lol有用的设置,,lol常用设置如何设置英雄联盟手游萊垍頭條在英雄联盟手游中,想要设置:萊垍頭條1.萊垍頭條首先需要进入游戏,萊垍

    保存硬盘上的数据,谁更有价值

    保存硬盘上的数据,谁更有价值,,常用的数据存储方式有两种:硬盘和光盘。用户或多或少对自己说,好的有很多人。争了,不知道你是否有账户的账号,两

    excel常用函数都有哪些?

    excel常用函数都有哪些?,函数,哪些,常用,1、SUM函数:SUM函数的作用是求和。函数公式为=sum()例如:统计一个单元格区域:=sum(A1:A10)  统计多个

    fcpx重做快捷键|fcpx常用快捷键

    fcpx重做快捷键|fcpx常用快捷键,,1. fcpx常用快捷键command+T,fcpx 叠化转场2. FCPX快捷键有个快捷键苹果键加上箭头加R就是调整速度的3. f

    咸鱼定位在哪设置|咸鱼如何修改定位

    咸鱼定位在哪设置|咸鱼如何修改定位,,1. 咸鱼如何修改定位首先要手机开启定位,闲鱼才能根据定位设定范围2. 怎么把咸鱼定位关掉闲鱼发布的

    闲鱼定位怎么设置|闲鱼怎么开启定位

    闲鱼定位怎么设置|闲鱼怎么开启定位,,1. 闲鱼怎么开启定位闲鱼上门回收流程答案如下:答:1、打开手机,点击闲鱼app。2/4进入闲鱼首页,点击页面

    ps各种快捷键|PS快捷键大全常用

    ps各种快捷键|PS快捷键大全常用,,PS快捷键大全常用工具类快捷键:移动工具:V套索工具:L(按住shift增加选区,按住ALT减少选区)魔棒工具:W吸管工具:I(