在HTML中，我们可以使用CSS来定义div的位置，这主要涉及到CSS的定位属性，包括：static(默认值，元素按照正常的文档流进行布局)、relative(相对于其正常位置进行定位)、absolute(相对于最近的已定位祖先元素进行定位)、fixed(相对于浏览器窗口进行定位)以及sticky(当设置了top或者bottom属性后，元素会相对其最近的非static定位祖先元素进行定位)。
静态定位
这是默认的定位方式，元素按照正常的文档流进行布局。
<div style="width:100px;height:100px;background-color:red;"></div>
这段代码将会创建一个宽度和高度都为100px的红色div,它将按照正常的文档流进行布局。
相对定位
使用position: relative;可以使元素相对于其正常位置进行定位。
<div style="position: relative; width:100px; height:100px; background-color:green;"></div> <div style="position: absolute; top: 50px; left: 50px; width:50px; height:50px; background-color:blue;"></div>
这段代码将会创建一个绿色的div和一个蓝色的div，绿色div的位置是相对于它自身的，而蓝色div的位置是相对于绿色div的，蓝色div会在绿色div的右上角显示。
绝对定位
使用position: absolute;可以使元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，那么就会相对于初始包含块(initial containing block)。
<div style="position: relative; width:200px; height:200px; background-color:yellow;">
<div style="position: absolute; top: 50px; left: 50px; width:50px; height:50px; background-color:orange;"></div>
</div>
这段代码将会创建一个黄色的容器div和一个橙色的子div，橙色子div的位置是相对于黄色容器div的，因此它会出现在容器div的右上角。
固定定位
使用position: fixed;可以使元素相对于浏览器窗口进行定位。
<div style="position: fixed; top: 50px; right: 50px; width:50px; height:50px; background-color:purple;"> </div>
这段代码将会创建一个紫色的div,它会始终出现在浏览器窗口的右上角，无论你如何滚动页面，这个div都会保持在那个位置。
粘性定位
使用position: sticky;可以使元素在滚动到一定位置时开始偏移，并在滚动结束后停止偏移，需要配合top或bottom属性使用。
<div style="position: sticky; top: 50px;">This div will stick to the top after scrolling.</div>
这段代码将会创建一个div,当你滚动页面时，它会从顶部开始偏移，直到你停止滚动为止，但是一旦你停止滚动，它就会停止偏移，回到原来的位置。
相关问题与解答：
1、如何设置div的大小？答：width和height属性可以用于设置div的大小。width:100px; height:100px;，也可以使用百分比来设置大小，width:50%; height:50%;，还可以使用rem单位来设置大小，width:5rem; height:5rem;,其中1rem等于根元素(通常是html元素)的字体大小。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/222380.html
微信扫一扫 