一、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>
效果图如下: