首页 > 编程知识 正文

position有几种属性,position常用属性

时间:2023-05-05 09:50:07 阅读:250542 作者:617

1. position: relative;相对定位

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

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

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

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

2. position: absolute;绝对定位

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

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

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

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

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

6> 提升层级(同相对定位)

3. position: fixed;固定定位

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

4. position:static默认值

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

5. position: sticky 粘性定位

粘性定位,该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

6. position: inherit

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

7. posiyion: initial

设置该属性为默认值,详情查看CSS initial 关键字

initial 关键字用于设置 CSS 属性为它的默认值。

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

 

 

一、背景介绍
POSITION是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。

二、知识剖析
position概念:
CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍、博客或网站也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构,各种垂直居中问题、弹性布局以及定位。
正如position is everything.
position属性值:
position的属性值共有四个常用的:static、relative、absolute、fixed。
还有三个不常用的:inherit、initial、sticky

三、知识详解
Static
所有元素在默认的情况下position属性均为static,而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right或者 z-index
声明在position为static的情况下无效。其用法为:在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。

Relative
relative定位,又称为相对定位,从字面上来解析,我们就可以看出该属性的主要特性:相对。但是它相对的又是相对于什么地方而言的呢?这个是个重点,也是最让我在学习CSS中迷糊的一个地方,现在让我们来做个测试,我想大家都会明白的:
(1) 初始未定位

 

图片.png

(2) 我们修改first元素的position属性:
相对偏移20px后:

 

图片.png

已经很明显了,相对定位相对的是它原本在文档流中的位置而进行的偏移,而我们也知道relative定位也是遵循正常的文档流,它没有脱离文档流,但是它的top/left/right/bottom属性是生效的,可以说它是static到absoult的一个中间过渡属性,最重要的是它还占有文档空间,而且占据的文档空间不会随top / right / left / bottom 等属性的偏移而发生变动,也就是说它后面的元素是依据虚线位置( top / left / right / bottom等属性生效之前)进行的定位,这点一定要理解。

小扩展 那好,我们知道了top / right / left / bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移,那么margin / padding属性会让该文档空间产生偏移吗? 答案是肯定的,我们一起来做个试验吧:

(3) 添加margin属性:
设置margin:20px后:

图片.png


对比一下,答案一目了然,我们先将first元素外边距设为20px,那么second元素就得向下偏移40px,所以margin是占据文档空间!

同理,大家可以自己动手测下padding的效果!

 

Absolute
absolute定位,也称为绝对定位,虽然它的名字号曰“绝对”,但是它的功能却更接近于"相对"一词,为什么这么讲呢?原来,使用absolut定位的元素脱离文档流后,就只能根据祖先类元素(父类以上)进行定位,而这个祖先类还必须是以position非static方式定位的,
举个例子,a元素使用absolute定位,它会从父类开始找起,寻找以position非static方式定位的祖先类元素(Note!一定要是直系祖先才算.),直到html根标签为止。
这里还需要注意的是,relative和static方式在最外层时是以body标签为定位原点的,而absolute方式在无父级是position非static定位时是以html作为原点定位。
但是呢,我们都知道html和body元素相差大概有9px左右。我们来看下效果:

(4) 添加absolute属性:
position: absolute;top :0;left : 0

 

图片.png

 

看了上面的信息后,细心的同学肯定要问了,为什么absolute定位要加 top:0; left:0; 属性,这不是多此一举吗?
其实我们加上这两个属性是完全必要的,因为我们如果使用absolute或fixed定位的话,必须指定 left、right、 top、 bottom属性中的至少一个,否则left/right/top/bottom属性会使用它们的默认值 auto,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递,简单讲就是都变成relative,会占用文档空间,这点非常重要,很多人使用absolute定位后发现没有脱离文档流就是这个原因,这里要特别注意~~~

小扩展
既然absolute是根据祖先类中的position非static元素进行定位的,那么祖先类中的margin/padding会不会对position产生影响呢?看个例子先:

(5) 在absolute定位中添加margin / padding属性:

 

图片.png

 

图片.png

 

结果很明朗了,祖先类的margin会让子类的absolute跟着偏移,而padding却不会让子类的absolute发生偏移。
总结一下,就是absolute是根据祖先类的border进行的定位。
Note : 充分了解Relative和Absolute的区别后,我们可以分析得出这个结论:(absolute)定位对象在可视区域之外会导致滚动条出现。而放置(relative)定位对象在可视区域之外,滚动条不会出现。这点在我们的前端页面制作中需要多加注意~~~

Fixed
在很长的时间里,这个属性值因为兼容性问题,并没有得到非常广泛的应用(IE6未实现该属性值)。fixed和absolute有很多共同点:
1.会改变行内元素的呈现模式,使display之变更为block。
2.会让元素脱离文档流,不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于:absolute的”根元素“是可以被设置的,而fixed则其”根元素“固定为浏览器窗口。即愤怒的鞋垫滚动网页,其元素与浏览器窗口之间的距离是恒定不变的。

三、拓展知识
z-index属性:
z-index,又称为对象的层叠顺序,它用一个整数来定义堆叠的层次,整数值越大,则被层叠在越上面,当然这是指同级元素间的堆叠,如果两个对象的此属性具有同样的值,那么将依据它们在HTML文档中流的顺序层叠,写在后面的将会覆盖前面的。需要注意的是,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。
Note:使用static 定位或无position定位的元素z-index属性是无效的。

什么是文档流?
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流,分别是:浮动、绝对定位和相对定位。



作者:南木小屋
链接:https://www.jianshu.com/p/a116022c6c99
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Java学习 --- springSecurity设置用户名和密码学java需要掌握哪些基础知识?字节跳动后端面经(11)Java快速入门集合框架和泛型图解(少代码

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。