CSS溢出、定位与层级控制详解
1. 溢出属性
CSS中的overflow属性用于定义当内容超出元素框时的处理方式。
| 值 | 描述 |
|---|---|
| visible | 默认值，内容超出部分仍然可见。 |
| hidden | 隐藏超出部分的内容。 |
| scroll | 无论是否超出，始终显示滚动条。 |
| auto | 根据需要自动添加滚动条。 |
代码示例
(1) 内容超出框外展示
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
height: 50px;
width: 50px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>内容超出部分显示在此区域之外。</div>
</body>
</html>
(2) 隐藏超出部分
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
height: 50px;
width: 50px;
border: 2px solid green;
overflow: hidden;
}
</style>
</head>
<body>
<div>超出部分将被隐藏。</div>
</body>
</html>
(3) 添加滚动条
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
height: 50px;
width: 50px;
border: 2px solid green;
overflow: scroll;
}
</style>
</head>
<body>
<div>内容超出时滚动条会显示。</div>
</body>
</html>
应用：图片裁剪为圆形
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.circle img {
width: 100%;
}
</style>
</head>
<body>
<div class="circle">
<img src="example.jpg" alt="示例图片">
</div>
</body>
</html>
2. 定位属性
CSS提供了多种定位方式，包括静态、相对、绝对和固定定位。
静态定位（static）
默认定位方式，不改变元素位置。
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#box {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
相对定位（relative）
相对于自身原始位置偏移。
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#box {
width: 100px;
height: 100px;
background-color: green;
position: relative;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
绝对定位（absolute）
相对于最近的非静态祖先元素定位。
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#parent {
position: relative;
width: 200px;
height: 200px;
background-color: lightgreen;
}
#child {
position: absolute;
width: 100px;
height: 100px;
background-color: green;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
固定定位（fixed）
相对于浏览器窗口定位。
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#box {
width: 50px;
height: 50px;
background-color: green;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
3. z-index属性
z-index用于控制元素在堆叠顺序中的层次关系。
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#base {
color: red;
z-index: 1;
}
#middle {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
#top {
position: absolute;
width: 200px;
height: 200px;
background-color: green;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
</style>
</head>
<body>
<div id="base">底层内容</div>
<div id="middle"></div>
<div id="top">顶层弹窗</div>
</body>
</html>
