欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

position属性及z-index属性

程序员文章站 2022-04-25 11:38:21
...

position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute、sticky。
(1)position: static
static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响。
(2)fixed定位
fixed定位是指元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会滚动,且fixed定位使元素的位置与文档流无关,因此不占据空间,且它会和其他元素发生重叠。
(3)relative定位
相对定位元素的定位是相对它自己的正常位置的定位。
弄清楚了relative是如何移动的,下面我们看一看移动之后是否会产生其他的影响。

<h2>这是一个没有定位的标题</h2>
<h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>

h2.pos_top{position:relative;top:-35px;}

position属性及z-index属性
(4)absolute定位
绝对定位的元素相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于html。
综上所述,当某个absolute定位元素的父元素具有position:relative/absolute/fixed时,定位元素都会依据父元素而定位,而父元素没有设置position属性或者设置了默认属性,那么定位属性会依据html元素来定位。

(5)position: sticky
在一个内容中,我们可以固定一个部分,然后到了另一个内容,又会固定另外一个部分。 同样也可以设置top值, 这个值是border上边缘和包裹元素的下边缘之间的距离,但是一旦滚动起来,就是和浏览器顶部的距离了。

(6)重叠的元素–z-index属性
z-index只能在position属性值为relative或absolute或fixed的元素上有效。
基本原理是:z-index的值可以控制定位元素在垂直于显示屏幕方向(z轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
一般父元素不能与子元素作z-index比较,如果要比较,就不能设置父元素的z-index值,只需要将子元素的z-index值设置为负数即可。

(7)脱离文档流导致的问题
我们知道如果使用position:absolute和position:fixed都会导致元素脱离文档流,由此就会产生相应的问题。
但是一旦子元素的position为fixed或者是absolute,那么它就会脱离文档流,这样的后果是父元素无法被撑开。
解决方法1:在js中设置父元素高度等于子元素的高度。

解决方法2:给父元素强行设置高度。(对于宽度导致的类似问题就强行设置宽度)

相关标签: position