绝对定位调节位置

匿名 (未验证) 提交于 2019-12-02 23:36:01

前端

绝对定位调节位置

在写完一个内容的样式后,它刚开始是不会按照你的想象去排的,这个也・需要自己设置


首先新建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像素。

来看效果

文章来源: https://blog.csdn.net/weixin_44540360/article/details/90632579
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!