Web前端开发——CSS布局与定位之层定位
目录 1. 内容 2. 层定位概述 3. 固定定位position:fix 3.1 案例1 3.2 案例2 4.相对定位position:relative 4.1 保留文档流的原位置 4.2 相对于直接父元素 5. 绝对定位position:absolute 5.1 不保留文档流的原位置 5.2 相对static定位以外的第一个父元素 5.2.1 一般情况 5.2.2 极端情况 6. relative和absolute的区别 7.relative+absolute混合使用 1. 内容 2. 层定位概述 我们希望网页的元素可以层叠在另外的一个元素上面,出现这种叠加或者覆盖的效果,这个时候我们就用到层定位,层定位像图像软件中的图层一样可以对每个layer能够精确定位操作。 层定位主要使用positon属性来设定 ,当前这一层究竟可以相对于哪一层来进行定位,不同的属性值它的参照物是不同的,有了参照物之后就使用这几个属性来进行位置的设定; z-index设置前后层的层叠关系,取值大的这一层会覆盖遮挡取值小的这一层,如果我们希望把当前的这个图片进行背景的设定,我们可以把它的z-index属性的取值设置的非常小,比如设置成一个负数(-999),如果设置的值很大,那么它就变成了顶层,都是按照它的取值大小顺序来逐层排列的; 我们把某个网页元素称为一层,那外面的元素称为父层,里面嵌入的元素称为子层