使用absolute的一个问题

当absolute没有祖先元素为除static的position时,是以body来定位,但是下面这个问题是怎么回事?

<style type="text/css">
        body{
            border:1px solid;
            width: 500px;
            margin: 0 auto;
        }
        #demo{
            border:1px solid;
            width: 300px;
            height: 300px;
            position: absolute;
            left: 20px;
        }

    </style>
</head>
<body>
    <div id="demo">
    </div>
</body>

图片描述

阅读 2.9k
4 个回答

元素的定位会相对于其最近的已定位的父元素,最后不一定是Body。在这些回答中,给body 一个background-color,你发现整个页面都会有颜色,为什么呢?

根元素<html>的背景即整个页面的背景。但如果其元素背景为默认值,即透明,就会取<body>元素的背景作为其背景。可以参考 stackoverflow —— Applying a background to <html> and/or <body>

你试试给body一个background-color

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题