溢出overflow和空间定位z-index

最新推荐文章于 2022-10-25 17:34:50 发布

对着阳光微笑

最新推荐文章于 2022-10-25 17:34:50 发布

阅读量4k

点赞数 1

分类专栏： html5+css3

本文链接：https://blog.csdn.net/qq_35768238/article/details/79999840

版权

html5+css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、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>

效果图如下：

对着阳光微笑

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
溢出overflow和空间定位z-index

一、overflow 语法格式：overflow: visible | hidden | scroll | auto visible ：若内容溢出，溢出可见 hidden ：若内容溢出，溢出不可见 scroll ：保持元素框大小，在框内应用滚动条显示内容 ...
复制链接

扫一扫