咱们做网页的时候，经常会遇到一个问题：想把某个内容块放在指定的地方，而这个内容块大多时候就是用 div 标签做的，所以设置 div 的位置就成了网页排版里很基础也很重要的一步。可能有人会说，div 不就是默认从上到下排吗？确实，刚创建的 div 默认是 “静态定位”，就像咱们排队买东西，一个跟着一个往下走，不会自己跑到别的位置去，但实际做网页时，肯定不能只靠默认排列，比如想把导航栏放顶部、侧边栏放左边，这些都需要专门去设置 div 的位置。
先说说最常用的相对定位吧，这种方式就像给 div 留了个 “原位置标记”，不管它怎么动，原来的位置还占着，不会让后面的元素挤过来。比如你在网页中间放了一个展示图片的 div，现在想让它相对于原来的位置往上挪一点，或者往左移一点，这时候就可以用相对定位。具体怎么做呢？就是给这个 div 加一句 “position: relative;”，然后再用 top、bottom、left、right 这几个属性来调距离。比如写个 “top: -10px;”，它就会往上挪 10 个像素；写 “left: 20px;”，就会往右移 20 个像素。这种设置 div 的位置的方式很灵活，因为它不会影响其他元素的排列，只是自己在原位置的基础上动一动。
再说说绝对定位，这种定位方式和相对定位不太一样，它就像让 div “脱离队伍”，不再跟着其他元素排队，而是直接跑到指定的地方。不过这里要注意一个关键点：绝对定位的 div 是相对于谁来定位的呢？默认情况下，如果它的父元素没有设置定位，那它就会相对于整个网页（也就是 body）来定位；如果它的父元素设置了定位（不管是相对定位、绝对定位还是固定定位），那它就会相对于这个父元素来定位。举个例子，咱们做一个卡片，卡片里面有个小图标想放在右上角，这时候就可以给卡片加 “position: relative;”，然后给小图标加 “position: absolute; right: 10px; top: 10px;”，这样小图标就会乖乖待在卡片的右上角，不管卡片怎么动，图标都跟着在卡片的那个位置。用绝对定位设置 div 的位置时，一定要先想清楚 “参照物” 是谁，不然很容易出现位置跑偏的情况。
还有一种常用的是固定定位，这种定位方式特别适合做那些需要一直显示在屏幕上的元素，比如网页顶部的导航栏，或者底部的回到顶部按钮。固定定位的参照物是浏览器窗口，不管你怎么滚动网页，用固定定位的 div 都不会动，一直停在你设置的那个位置。比如想让导航栏一直固定在浏览器顶部，就可以给导航栏的 div 加 “position: fixed; top: 0; left: 0; width: 100%;”，这样不管你往下滚多少内容，导航栏都始终在顶部。不过用固定定位的时候要注意，因为它也会 “脱离队伍”，所以可能会挡住下面的内容，这时候可以给下面的元素加一点 margin-top，把挡住的地方让出来，这样整体排版就不会乱了。
除了用定位属性，有时候还会用 margin 和 padding 来辅助设置 div 的位置。margin 是 div 的 “外边距”，就是 div 和其他元素之间的距离；padding 是 “内边距”，是 div 内部内容和 div 边框之间的距离。比如两个 div 挨得太近，想让它们之间分开一点，就可以给左边的 div 加 “margin-right: 30px;”，这样两个 div 之间就会空出 30 个像素的距离；如果想让 div 里面的文字不贴在边框上，就可以加 “padding: 15px;”，让文字和边框之间有足够的空间。虽然 margin 和 padding 不是专门的定位属性，但在实际设置 div 的位置时，它们经常和定位属性配合使用，让整个网页的排版更整齐、更美观。
可能有人刚开始学的时候会觉得这些属性有点乱，比如分不清相对定位和绝对定位的区别，或者不知道什么时候该用固定定位。其实很简单，多动手试试就明白了。比如先建一个简单的网页，放几个 div，然后分别给它们加不同的定位属性，改一改 top、left 这些数值，看看它们的位置怎么变，慢慢就能找到规律。比如想让元素相对于自己原来的位置动，就用相对定位；想让元素相对于父元素或网页定位，就用绝对定位；想让元素固定在浏览器窗口，就用固定定位。再配合 margin 和 padding 调整距离，设置 div 的位置就会越来越顺手。
总的来说，在网页制作里设置 div 的位置，没有什么特别复杂的技巧，主要就是掌握好 position 属性的几个值（static、relative、absolute、fixed），再结合 margin 和 padding 来调整。不同的需求对应不同的方法，比如做侧边栏可能用绝对定位配合父元素的相对定位，做固定导航就用固定定位，调整元素之间的距离就用 margin。只要多练习，熟悉每个属性的作用，不管是简单的网页还是复杂的布局，都能轻松把 div 放在自己想要的位置上。