position:relative|absolute|fixed 与 overflow

最新推荐文章于 2024-03-01 13:32:09 发布

ufojoan

最新推荐文章于 2024-03-01 13:32:09 发布

阅读量545

点赞数

分类专栏：前端

前端专栏收录该内容

98 篇文章

订阅专栏

本文通过两个实例展示了在CSS布局中，如何使用position属性配合overflow属性来实现元素的隐藏效果。当父容器未设置position时，即使设置了overflow:hidden也无法限制子元素的显示范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行下面的代码，因为父容器没有设置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>

运行效果