CSS基础 设置div的top与left值无效

时间:2021-08-11 20:10:52
       慈心积善融学习,技术愿为有情学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。


根据网友的评论,心少朴 也反思了一下。先来真传一句话的版本吧。

CSS基础 设置div的top与left值无效




然后,对 心少朴遇到的情景进行再现。


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




2、无效效果图
CSS基础 设置div的top与left值无效



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

2、效果图

CSS基础 设置div的top与left值无效




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