收藏
PHPz批改状态：合格
老师批语：
我们通常在网页布局中希望加入QQ客服列表，这里在三行三列的定位布局中演示下QQ客服的固定定位，以下是效果图和源码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三行三列的定位布局中演示QQ客服的固定定位</title>
<style>
/* 在线QQ客服的固定定位:滚动浏览器QQ客服框位置保持不变*/
.qq{
width: 16.8rem;
height: 32.8rem;
/* border: 5px solid rgb(206, 205, 205); */
right:0em;
bottom: 5em;
position: fixed;
/* 对QQ客服框进行置顶显示，以免被覆盖 */
z-index: 9999;
}
/* 三行三列的定位布局 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
font-size: 10px;
}
body{
font-size: 1.6rem;
}
header,footer{
height: 5rem;
background-color:lightcyan;
}
.container{
margin: 0.5rem 0;
min-height: calc(100vh - 11rem);
position: relative;
}
.container main{
/* border: 1px solid red; */
position: absolute;
left: 20.5rem;
right: 20.5rem;
background-color:lightblue;
min-height: inherit;
}
.container aside{
width: 20rem;
background-color: yellow;
min-height: inherit;
position:absolute;
}
.container aside:first-of-type{
left: 0;
top: 0;
}
.container aside:last-of-type{
right: 0;
top: 0;
}
</style>
</head>
<body>
<!-- QQ客服的固定定位 演示结果嘛，一行搞定-->
<div class="qq"><img src="https://img.php.cn/upload/image/314/432/404/1626188810561389.png" alt="QQ客服" title="QQ客服"></div>
<!-- 三行三列的定位布局 -->
<header>头部</header>
<div class="container">
<aside>左侧</aside>
<main>内容区</main>
<aside>右侧</aside>
</div>
<footer>底部</footer>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
