溢出overflow和空间定位z-index

最新推荐文章于 2025-06-25 11:13:41 发布

对着阳光微笑

最新推荐文章于 2025-06-25 11:13:41 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html5+css3

本文链接：https://blog.youkuaiyun.com/qq_35768238/article/details/79999840

html5+css3 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中overflow属性的使用方法及其应用场景，并通过示例展示了如何利用overflow实现元素内容的显示控制。同时，文章还讲解了z-index属性的作用及如何通过z-index来调整定位元素的堆叠顺序。

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

一、overflow

语法格式：overflow: visible | hidden | scroll | auto

visible ：若内容溢出，溢出可见

hidden ：若内容溢出，溢出不可见

scroll ：保持元素框大小，在框内应用滚动条显示内容

auto ：等同于scroll，它表示在需要时应用滚动条

适用情况：

① 当元素有负边界时

② 框宽于上级元素内容区，不允许换行

③ 元素框宽于上级元素区域宽度

④ 元素框高于上级元素取余高度

⑤ 元素定义了绝对定位

<style type="text/css">
.div3{				        
	position: absolute;
	color: #445633;				
	height: 100px;
	width: 20%;
	float: left;				
	margin: 0 auto;				
	padding: 4px 20px;				
	border: 2px solid #cccccc;				
	overflow: auto;
}
</style>
<body>
   <div class="div3">
	<p> 综艺节目</p>
	<p> 1 非诚勿扰</p>
	<p> 2 康熙来了</p>
	<p> 3 快乐大本营</p>
	<p> 4 爸爸去哪了</p>
	<p> 5 天天向上</p>
	<p> 6 我们约会吧</p>
   </div>
</body>

效果图如下：

若改为overflow:hidden;则有如下效果：

第六个将被隐藏看不见，没有滚动条无法下滑。

二、z-index

z-index属性用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴，z-index值大的页面位于小的上方。

<style type="text/css">
    .block1{
        background-color: #ff0000;
        border: 1px dashed #000000;
        padding: 10px;
        position: absolute;
  	left: 20px;
	top: 30px;
	z-index: 1;
    }
    .block2{
	background-color: #ffc23c;
	border: 1px dashed #000000;
	padding: 10px;
	position: absolute;
	left: 40px;
	top: 50px;
	z-index: 0;
    }
    .block3{
	background-color: #c7ff9d;
	border: 1px dashed #000000;
	padding: 10px;
	position: absolute;
	left: 60px;
	top: 70px;
	z-index: -1;
    }
</style>
<body>
        <p class="block1">AAAAAA</p>
        <p class="block2">BBBBBB</p>
        <p class="block3">CCCCCC</p>
</body>

效果图如下：