首页 > 软件开发 > CSS >

html中如何让两个DIV相交在一起

来源:互联网 2023-03-16 19:12:04 301

在html页面中,可以使用css中的position定位属性实现div相交在一起。下面小编举例讲解html中如何让两个DIV相交在一起。8wL办公区 - 实用经验教程分享!

html中如何让两个DIV相交在一起8wL办公区 - 实用经验教程分享!

工具/原料

  • html css
  • 代码编辑器:Dreamweaver CS5

方法/步骤

  • 1

    新建一个html文件,命名为test.html,用于讲解html中如何让两个DIV相交在一起。8wL办公区 - 实用经验教程分享!

    html中如何让两个DIV相交在一起8wL办公区 - 实用经验教程分享!

  • 2

    在test.html文件内,使用div分别创建两个模块,用于测试。

    8wL办公区 - 实用经验教程分享!

    8wL办公区 - 实用经验教程分享!

    html中如何让两个DIV相交在一起8wL办公区 - 实用经验教程分享!

  • 3

    在test.html文件内,分别设置两个div的id为one、two,用于下面通过该id获得div对象。

    8wL办公区 - 实用经验教程分享!

    8wL办公区 - 实用经验教程分享!

    html中如何让两个DIV相交在一起8wL办公区 - 实用经验教程分享!

  • 4

    在css标签内,通过元素名称设置两个div的宽度为200px,高度为200px,同时,通过id分别设置两个div的边框属性,一个为灰色边框, 另一个为红色边框。

    8wL办公区 - 实用经验教程分享!

    8wL办公区 - 实用经验教程分享!

    html中如何让两个DIV相交在一起8wL办公区 - 实用经验教程分享!

  • 4相关内容未经授权抓取自百度经验
  • 5

    在css标签内,再设置id为two的div的样式 ,使用position属性设裕茄躲置其定位属性为绝对定位,并使用top属性设置其距离顶总召部0px,使用left设置其距离左边为100px,从而实现两个div相交。

    8wL办公区 - 实用经验教程分享!

    8wL办公区 - 实用经验教程分享!

    html中如何让两个DIV相交在一起8wL办公区 - 实用经验教程分享!

  • 6

    在浏览器打开test.html文件,查看实现的肥捧效果。8wL办公区 - 实用经验教程分享!

    html中如何让两个DIV相交在一起8wL办公区 - 实用经验教程分享!

  • 总结:

  • 1

    1、创建两个div模块。8wL办公区 - 实用经验教程分享!

    2、分别设置两个div模块的样式 ,其中一个div使用position布局,通过top、left属性的设置,实现两个div相交。

    8wL办公区 - 实用经验教程分享!

    8wL办公区 - 实用经验教程分享!

  • 注意事项

    • 除了以上方法外,还可以使用relative相对位置来实现以上的效果。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!8wL办公区 - 实用经验教程分享!


    标签: HTMLCSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码