怎么控制div 的位置

CSS是一种强大的样式表语言，它可以用来控制HTML元素的位置、大小、颜色等样式，在HTML中，我们可以通过内联样式、内部样式表、外部样式表或者直接在HTML标签中使用style属性来设置元素的样式。

控制div位置的基本方法有两种：绝对定位和相对定位，绝对定位是相对于最近的已定位祖先元素（而不是相对于视口）进行定位的，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块，相对定位是相对于其正常位置进行定位的。

一、绝对定位

绝对定位的元素会脱离正常的文档流，不占据空间，我们可以使用top、right、bottom和left属性来设置元素的位置，这些属性的值可以是像素值、百分比值或者em单位。

我们可以创建一个绝对定位的div，使其距离顶部10px，距离右侧20px，距离底部30px，距离左侧40px：

<div style="position: absolute; top: 10px; right: 20px; bottom: 30px; left: 40px;">This is a div positioned absolutely.</div>

二、相对定位

相对定位的元素会相对于其正常位置进行定位，我们可以使用top、right、bottom和left属性来设置元素的位置，这些属性的值可以是像素值、百分比值或者em单位。

我们可以创建一个相对定位的div，使其距离顶部5px，距离右侧10px，距离底部15px，距离左侧20px：

<div style="position: relative; top: 5px; right: 10px; bottom: 15px; left: 20px;">This is a div positioned relatively.</div>

三、固定定位

固定定位的元素会相对于浏览器窗口进行定位，我们可以使用top、right、bottom和left属性来设置元素的位置，这些属性的值可以是像素值、百分比值或者em单位，如果元素的父元素是静态定位的，那么这个元素也是静态定位的；如果元素的父元素是相对定位的，那么这个元素也是相对定位的；如果元素的父元素是绝对定位的，那么这个元素也是绝对定位的。

我们可以创建一个固定定位的div，使其距离顶部10px，距离右侧20px，距离底部30px，距离左侧40px：

<div style="position: fixed; top: 10px; right: 20px; bottom: 30px; left: 40px;">This is a div positioned fixed.</div>

四、CSS中的flex布局

Flex布局是CSS3新增的一种布局模式，它可以使父元素成为一个flex容器，然后通过flex子项的属性来控制子项的位置和大小，我们可以使用justify-content、align-items和align-self属性来设置子项的对齐方式。

我们可以创建一个flex布局的div，使其内部的div水平排列并居中对齐：

<div style="display: flex; justify-content: center; align-items: center;">
    <div>This is a div in a flex container.</div>
</div>

五、CSS中的grid布局

Grid布局是CSS3新增的一种布局模式，它可以使父元素成为一个grid容器，然后通过grid子项的属性来控制子项的位置和大小，我们可以使用grid-template-columns和grid-template-rows属性来定义子项的列数和行数。

我们可以创建一个grid布局的div，使其内部的div按照2列2行排列：

<div style="display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;">
    <div>This is a div in a grid container.</div>
    <div>This is another div in a grid container.</div>
</div>