多语言展示
当前在线:1599今日阅读:190今日分享:11

如何使html中两个div块重叠

有两种方法,①z-index法②relative法
工具/原料
1

notepad++

2

带浏览器的计算机一台

z-index方法
1

首先如图有

  one和two 我们要让two覆盖到one上

2

static是默认值,用来消除对父元素的继承(pass) ralative,起始位置是原来位置,然后用top、bottom、left、right改变位置,但是原来的位置会空一块出来,如图

3

two加上z-index,同时父元素脱离文件流设为absolute就好了

4

上图看来有点问题,但我们不给父元素设置背景色就好了

relative方法
1

absolute,起始位置是第一个不为默认位置的父元素,然后用top、bottom、left、right改变位置 two设为absolute,父元素加上relative

2

fixed,起始位置是窗口,然后用top、bottom、left、right改变位置,但是会固定在窗口不随滚动条运动,不符合要求 sticky,原本是static,滚动条到一定位置是fixed,也不符合要求

注意事项
1

relative方法不加父元素也行,个人感觉以窗口做起始位置不太好用

2

关键点是脱离文件流absolute

3

我现在喜欢relative方法

推荐信息