绝对定位调节位置

前端

绝对定位调节位置

在写完一个内容的样式后,它刚开始是不会按照你的想象去排的,这个也·需要自己设置
在这里插入图片描述
首先新建HTML、CSS文档各一个并把它们保存在同一个文件夹中,然后在HTML中引用CSS,先设置三个“div”一个“header”包裹“hello”和“hello1”

来看看CSS的样式
在这里插入图片描述

先把内外边距默认为零,给“header”宽1000像素,高600像素,一个边框,相对定位。

给“hello”宽400像素,高400像素,背景颜色为“#1900fa”

给“hello”宽400像素,高400像素,背景颜色为“#dadaad”

看看效果
在这里插入图片描述

我们要把蓝色下面的盒子移动到蓝色右边去,大多数人都只会用“margin-top”、“margin-left”

下面叫你用绝对定位调节位置,但你必须要给“header”一个相对定位,否则你写的关于绝对定位的样式都没有用
在这里插入图片描述

在“hello1”中加绝对定位并且left为400像素,top为0像素。

来看效果
在这里插入图片描述