overflow:hidden;与position搭配使用出现超出部分没有隐藏的问题

最新推荐文章于 2024-05-04 04:33:35 发布

xhbd_933

最新推荐文章于 2024-05-04 04:33:35 发布

阅读量4.7w

点赞数

本文链接：https://blog.csdn.net/xhbd_933/article/details/80063074

版权

overflow 属性规定当内容溢出元素框时发生的事情。

以下是overflow可能的值及其作用的简单描述

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

今天我们主要来探究一下overflow：hidden；与position搭配使用出现的特例。

大家都知道正常情况下overflow：hidden；都会超出部分隐藏。

eg：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.grandfather{
			width: 400px;
			height:400px;
			background-color:pink;
		        position:relative;
                 }
		.dad{
			width:300px;
			height:300px;
			background-color: blue;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="grandfather">
		<div class="dad">
			<div class="child"></div>
		</div>
	</div>
</boy>
</html>

浏览器运行结果

我们看到给祖先元祖grandfather相对定位，父级元素father 设置overflow：hidden时，子元素child超出部分隐藏了；属于正常情况。

但当child加上绝对定位后又会出现什么情况呢？

代码：

.child{
	width: 600px;
	height: 100px;
	background-color: red;
        position:absolute;
}

浏览器运行结果：

在这个运行结果中我们看到child盒子超出其父元素的部分并没有隐藏起来，而是它正常的宽高。

结论：当组先级元素相对定位，父元素overflow：hidden；时，子元素超出部分不隐藏

xhbd_933

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
overflow:hidden;与position搭配使用出现超出部分没有隐藏的问题

overflow 属性规定当内容溢出元素框时发生的事情。以下是overflow可能的值及其作用的简单描述值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflo...
复制链接

扫一扫