怎么控制div的位置

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

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

一、绝对定位

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

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

This is a div positioned absolutely.

二、相对定位

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

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

This is a div positioned relatively.

三、固定定位

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

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

This is a div positioned fixed.

四、CSS中的flex布局

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

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

    
This is a div in a flex container.

五、CSS中的grid布局

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

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

    
This is a div in a grid container.
    
This is another div in a grid container.

网页名称：怎么控制div的位置
当前网址：http://www.mswzjz.cn/qtweb/news5/455855.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能