为什么在浏览器中2个框的左右边框没有重叠呢?请指导

为什么在浏览器中2个框的左右边框没有重叠呢?请指导

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>position</title>

    <style>

    

        .div1{

            width: 100px;

            height: 100px;

            border:2px solid black;

            position:relative;

            

            top:0px;

            left:0px;


            

        }

        .div2{

            width: 100px;

            height: 100px;

            border:2px solid red;

            position:relative;

            

            top:0px;

            left:-100px;


            

        }


        

        div{float:left;line-height:100px;text-align:center;}

    </style>

</head>

<body>

    <div class="div1">A</div>

    <div class="div2">B</div>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

3回答

首先没有清除元素的默认的内外边距,其次是元素的实际宽度就如上面同学所言,是104px哦http://img1.sycdn.imooc.com/climg//5983e1bc0001953f05750749.jpg

  • chriose #1
    为什么老师的写的是100px就可以了,我们必须要加上边框的宽度。
    2017-08-04 15:50:40
  • chriose #2
    z-index为什么一定是1和9才能覆盖。
    2017-08-04 16:01:05
怎么都被占用了呢 2017-08-04 16:36:22

因为老师引入了一个外部的reset.css文件,该文件中,设置了盒子模型为border-box,也就是div的边框不会改变实际的宽度。http://img1.sycdn.imooc.com/climg//598431b700015c4204940513.jpg。至于z-index值,不一定是1和9,取值多少都可以,谁的值大,谁在上面。

qq_天天_66 2017-08-03 22:36:30

因为你的div1的实际宽度是104px,要加上边框的大小,你div2的left:-104px

就行了

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师