CSS基础 设置top与left让两个div快出现重叠部分，并设置两者重叠的顺序

时间：2022-01-16 05:28:58
       慈心积善融学习，技术愿为有情学。善心速造多好事，前人栽树后乘凉。我今于此写经验，愿见文者得启发。


1、未设置顺序的代码 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">

        #div1{
            height:300px;
            width:300px;
            background-color:red;
            top:100px;
            left:100px;

            position:absolute;
        }
        #div2{
            height:300px;
            width:300px;
            background-color:yellow;
            top:150px;
            left:150px;

            position:absolute;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <!--我最初写的时候，就把id与class选择器的设置方式搞错了，结果木有效果-->
</body>
</html>




2、未设置顺序的效果图
CSS基础 设置top与left让两个div快出现重叠部分，并设置两者重叠的顺序



3、设置顺序的代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">

        #div1{
            height:300px;
            width:300px;
            background-color:red;
            top:100px;
            left:100px;
            position:absolute;

            z-index:2;
        }
        #div2{
            height:300px;
            width:300px;
            background-color:yellow;
            top:150px;
            left:150px;
            position:absolute;

            z-index:1;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <!--我最初写的时候，就把id与class选择器的设置方式搞错了，结果木有效果-->
</body>
</html>

4、设置顺序的效果图

CSS基础 设置top与left让两个div快出现重叠部分，并设置两者重叠的顺序



感恩曾经帮助过 心少朴 的人。
html+css+javascript优秀，值得学习。
注：此文是自学笔记所生，质量中下等，故要三思而后行。新手到此，不可照搬，应先研究其理象数，待能变通之时，自然跳出深坑。

标签：

相关文章