position:absolute与overflow:hidden

最新推荐文章于 2023-12-07 08:00:00 发布

ufojoan

最新推荐文章于 2023-12-07 08:00:00 发布

阅读量1.2k

点赞数

分类专栏：前端

前端专栏收录该内容

98 篇文章 0 订阅

订阅专栏

因为父容器设定了 position:relative|absolute|fixed。那将会使overflow“生效”。

运行下面的代码，因为父容器没有设置position:relative|absolute|fixed ，所以overflow是不能生效的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>脱离文档流</title>
</head>
<body>
<div style="width:200px;height:200px;overflow:hidden;border:solid 1px red;">
    我没有设置position
    <div style="position:absolute;left:100px;top:100px;width:300px;height:300px;border:solid 1px blue;">我是绝对定位!父容器是红色的框框。</div>
</div>
</body>
</html>

一旦设置的话

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>脱离文档流</title>
</head>
<body>
<div style="width:200px;height:200px;overflow:hidden;border:solid 1px red;position:relative;">
    一旦设置了position
    <div style="position:absolute;left:100px;top:100px;width:300px;height:300px;border:solid 1px blue;">我是绝对定位!父容器是红色的框框。</div>
</div>
</body>
</html>