在css中， 可以使用position定位属性来设置两个div的相对位置 。 下面小编举例讲解css如何调整两个div的相对位置 。
文章插图
需要这些哦
代码编纂器：z studio 10.0
html+css
方式/
1新建一个html文件， 定名为test.html， 用于讲解css若何调整两个div的相对位置 。
文章插图
2在test.html文件内， 利用div建立两个模块， 一个div模块包含另一个div模块 。
文章插图
3在test.html文件内， 别离设置div的class属性为outdiv， indiv， 用于下面界说其样式 。
文章插图
4在css标签内， 设置外部div的样式， 界说其宽度为250px， 高度为250px， 布景颜色为灰色， 定位属性绝对定位 。
文章插图
5在css标签内， 设置内部div的样式， 界说其宽度为50px， 高度为50px， 布景颜色为红色， 定位属性相对定位， 利用top属性设置相对外部div的顶部50px， 左部50px 。
文章插图
6在浏览器打开test.html文件， 查看成果 。
文章插图
总结：1【css如何调整两个div的相对位置】1、利用div建立两个模块， 一个div模块包含另一个div模块 。
2、在css标签内， 设置外部div的样式， 定位属性绝对定位 。
3、在css标签内， 设置内部div的样式， 定位属性相对定位， 利用top属性设置相对外部div的顶部距离， 左部距离 。
注重事项relative为相对定位， absolute为绝对定位 。
以上内容就是css如何调整两个div的相对位置的内容啦， 希望对你有所帮助哦！
推荐阅读
- wpsPPT中如何制作胶囊型封面
- jquery如何实现点击按钮跳转页面
- wpsPPT中如何制作彩色水墨效果文字
- 无需任何工具 如何将B站视频缓存到电脑上
- div+css如何把图片设为背景
- 如何正确使用空中信使校园 1 公里社交 App
- 电脑qq如何设置拒绝所有临时会话？
- 如何批量更改图片清晰度？
- 如何将自己的视频上传到优酷？
- 非洲猪瘟是什么，传染人吗，如何预防