做建站八年，我见过太多老板花大价钱请人做个网站，结果打开一看，满屏乱飞，鼠标一碰就错位，手机上看更是惨不忍睹。这都不是技术不行，是根本不懂“层”的规矩。今天我不讲虚的，直接告诉你网站建设中有关层的使用的步骤，全是干货，看完能省不少冤枉钱。

先说个真事。上个月有个老客户找我救火，说网站改版后，导航栏在电脑上看好好的，一到手机上就跑到页面中间去了，按钮还盖住了主要内容。我打开代码一看，好家伙，全是绝对定位，而且没有做响应式适配。这就是典型的“为了动而动”，完全忽略了层与层之间的关系。

层，在网页里就是那个div盒子。它像不像你在办公室里的工位？你得知道谁坐在谁旁边，谁在谁上面。如果不懂网站建设中有关层的使用的步骤，你的网站就是个乱糟糟的仓库。

第一步，理清层级关系，别急着写代码。

很多新手一上来就打开Dreamweaver或者VS Code，噼里啪啦敲代码。错！大错特错。你得先在纸上，或者用墨刀、Axure画个草图。搞清楚哪些元素是并列的，哪些是包含的。比如，一个Banner图，它下面可能是标题，标题下面是正文。这个结构就是父子关系。如果你把标题和正文都设为绝对定位，它们就会打架。记住，能用的相对定位，就别用绝对定位；能用的流式布局，就别死磕像素值。

第二步，设置基准，固定参照物。

这是最关键的一步，也是90%的人容易翻车的地方。层的位置是相对于谁的？默认是相对于浏览器窗口，但这样在移动端就废了。你必须给父容器设置position: relative，然后子元素用position: absolute。这样，子元素的位置就是相对于父容器的。这就好比，你告诉员工“你坐在张三旁边”，而不是“你坐在离墙5米的地方”。前者随张三动，后者张三一挪你就撞墙了。我在做网站建设中有关层的使用的步骤时，这一步雷打不动，先定父级，再定子级。

第三步，处理重叠与层级，z-index不是万能的。

有时候你需要让一个按钮浮在图片上，这时候得用z-index。但别瞎填数字，填100、200、1000，最后自己都晕了。z-index只在同一个层级的元素间有效。如果两个按钮不在同一个父容器下，你调z-index可能根本没反应。这时候得往上找，直到找到它们的共同祖先，或者给它们套个新的父容器。我见过太多人为了调个层级，把代码改得一塌糊涂，最后干脆用margin负值去硬蹭，那是偷懒，不是技术。

第四步，测试，测试，还是测试。

别信你的眼睛，要信数据。用Chrome的开发者工具，模拟各种屏幕宽度。320px的手机，768px的平板，1920px的显示器。你会发现，有些层在小屏幕上会溢出，有些会重叠。这时候，媒体查询（Media Query）就派上用场了。针对不同屏幕，调整层的宽高、位置。这不是修补，这是设计的一部分。

我为什么这么恨那些乱用层的代码？因为维护起来太痛苦了。半年后，你或者你的继任者再看代码，就像看天书。每一行代码都要问自己：这个层为什么在这？它为什么这么大？如果答案含糊不清，那就重构。

最后，说点心里话。建站不是搭积木，随便堆砌就行。它是建筑学，讲究结构稳固、空间合理。掌握网站建设中有关层的使用的步骤，不是为了炫技，而是为了让你的网站在用户面前体面、流畅、专业。

别再让那些错位的层丢你的脸了。按我说的这四步走，虽然前期多花点时间思考，但后期你会感谢自己的严谨。毕竟，网站是你的一张脸面，别让它看起来像个没收拾的房间。

本文关键词：网站建设中有关层的使用的步骤