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优秀，值得学习。
注：此文是自学笔记所生，质量中下等，故要三思而后行。新手到此，不可照搬，应先研究其理象数，待能变通之时，自然跳出深坑。

标签：

相关文章