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

效果图如下：

溢出overflow和空间定位z-index相关推荐

web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
文章目录什么是定位? 定位组成(定位模式+边偏移) 定位模式static relative absolute fixed 边偏移定位模式--静态定位static(平时用不到)就是标准流定位模式- ...
CSS 处理溢出 overflow属性
在CSS中,如果设置了一个盒子的宽度与高度,则盒子中的内容就可能超过盒子本身的宽度或高度.此时,可以使用 overflow 属性来控制内容溢出时的处理方式. overflow属性的可选值有 visib ...
css继承-文字及inherit/优先级-权重/盒子问题box-sizing/溢出overflow
一. CSS继承文字相关的样式可以被继承 color line-height font-style font-size font-weight - 布局相关的样式不能被继承 ( 默认行为 ) 通过设 ...
HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
js怎么设置z index.html,HTML5 Canvas set z-index
j0kEli Stone提出了一个问题:HTML5 Canvas set z-index,或许与您遇到的问题类似. 回答者markE给出了该问题的处理方式: Yes..kind of yes. You ...
CSS 溢出overflow属性的使用
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章博客地址
html设置z index.html,CSS中z-index属性的使用方法和示例介绍
怎么使用CSS z-index属性?下面本篇文章就来给大家浅谈一下CSS z-index属性的使用方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. z-index属性介绍只有设置 ...
10.【CSS定位】：position、z-index、dispaly(none)、visibility、overflow hot new 模块 + 淘宝焦点图布局 +土豆网鼠标经过显示遮罩
文章目录 [CSS定位] 一.定位 1.1 为什么需要定位? 1.2 定位组成 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定位 absolute( ...
div固定大小文字溢出自动缩小_CSS样式更改——框模型、定位、浮动、溢出
前言上篇文章主要介绍了CSS样式更改篇中的列表.表格和轮廓,这篇文章主要介绍CSS样式更改中框模型.定位.浮动.溢出基础知识. 1.框模型Border Model 从上图可以得知,如果把一个网页比作 ...

溢出overflow和空间定位z-index

一、overflow

二、z-index

溢出overflow和空间定位z-index相关推荐

最新文章

热门文章