一、标准流布局
默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
从左到右、从上到下按顺序摆放好- 默认情况下，互相之间不存在
层叠现象
1.margin-padding位置调整
在标准流中，可以使用margin、padding对元素进行定位
- 其中margin还可以设置负数
比较明显的缺点是
- 设置一个元素的
margin或者padding，通常会影响到标准流中其他元素的定位效果 - 不便于实现元素层叠的效果
如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?
- 我们可以通过
position属性来进行设置;
二、定位
1.认识元素的定位
定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为:
- 例如放在另一个元素的上面;
- 或者始终保持在浏览器视窗内的同一位置;
定位在开发中非常常见:
2.认识position属性
利用position可以对元素进行定位，常用取值有5个:
static | relative | absoulte | sticky | fixed
默认值:
static：默认值, 静态定位
使用下面的值, 可以让元素变成 定位元素(positioned element)
relative：相对定位absolute：绝对定位fixed：固定定位sticky：粘性定位
3.静态定位 - static
position属性的默认值
- 元素按照 normal flow 布局
left 、right、top、bottom没有任何作用
三、相对定位
元素按照 normal flow 布局，原有的位置依然保留占位空间
可以通过 left、right、top、bottom 进行定位
- 定位
参照对象是元素自己原来的位置
left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
相对定位的应用场景
- 在不影响其他元素位置的前提下，对当前元素位置进行微调
1.相对定位练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
height: 489px;
background-color: red;
overflow: hidden;
}
img {
position: relative;
/* left: -960px; */
/* 动态获取 */
/* translate中的百分比是相对于自己 */
transform: translate(-50%);
margin-left: 50%;
}
</style>
</head>
<body>
<div class="box">
<img src="../../images/mhxy.jpg" alt="大话西游">
</div>
</body>
</html>
保持图片在窗口缩放过程中始终保持与窗口居中对齐的方法
四、固定定位
-
元素脱离normal flow（脱离标准流、脱标）
-
可以通过 left、right、top、bottom进行定位
-
定位参照对象是
视口（viewport） -
当画布滚动时，固定不动
1.画布 和 视口
视口（Viewport）
- 文档的可视区域
- 如图
红框所示
画布（Canvas）
- 用于渲染文档的区域
- 文档内容超出视口范围，可以通过滚动查看
- 如图
黑框所示
宽高对比
- 画布 >= 视口
2.固定定位练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
color: #333;
}
.content {
height: 1200px;
background-color: #fff;
}
.page-btn {
position: fixed;
right: 50px;
bottom: 30px;
width: 50px;
}
.page-btn a {
display: block;
height: 20px;
padding: 5px;
margin: 5px 0;
background-color: #aaa;
border-radius: 5px;
line-height: 20px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<h1 id="title">标题1</h1>
<div class="page-btn">
<a class="top" href="#title">
顶部
</a>
<a class="bottom" href="#">
反馈
</a>
</div>
<div class="content"></div>
</body>
</html>
五、绝对定位
元素脱离 normal flow（脱离标准流、脱标）
◼ 可以通过 left、right、top、bottom 进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
◼ 定位元素（positioned element）
- position 值不为static的元素
- 也就是position值为
relative、absolute、fixed的元素
1.子绝父相
◼ 在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
◼ 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
- 父元素设置 position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
- 子元素设置 position: absolute
- 简称为“
子绝父相”
<!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>Document</title>
<style>
.container {
width: 800px;
height: 800px;
background-color: #f00;
position: relative;
}
.box {
width: 500px;
height: 500px;
background-color: #0f0;
position: absolute;
right: 0;
bottom: 0;
}
strong {
position: absolute;
left: 0;
bottom: 0;
}
img {
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<span>我是span元素</span>
<strong>我是strong元素</strong>
<img src="../images/gouwujie01.jpg" alt="">
<div>我是div元素</div>
</div>
</div>
</body>
</html>
2.将position设置为absolute/fixed元素的特点一
-
可以随意设置宽高
-
宽高默认由内容决定
-
不再受标准流的约束
- 不再严格按照
从上到下、从左到右排布 - 不再严格
区分块级、行内级，块级、行内级的很多特性都会消失
- 不再严格按照
-
不再给父元素汇报宽高数据
-
脱标元素内部默认还是按照标准流布局
<!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>Document</title>
<style>
.box {
background-color: #f00;
}
.box strong {
position: absolute;
width: 200px;
height: 200px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="box">
<strong>
<span>我是strong元素</span>
<i>我是i元素</i>
</strong>
</div>
</body>
</html>
3.将position设置为absolute/fixed元素的特点二
◼ 绝对定位元素（absolutely positioned element）
- position值为
absolute或者fixed的元素
◼ 对于绝对定位元素来说
- 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
- 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
◼ 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
- left: 0、right: 0、top: 0、bottom: 0、margin:0
◼ 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
- left: 0、right: 0、top: 0、bottom: 0、margin: auto
- 另外，还得
设置具体的宽高值（宽高小于定位参照对象的宽高）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
position: relative;
height: 600px;
background-color: #aaa;
}
.box1 {
position: absolute;
/* 占满父元素宽度 */
left: 0;
right: 0;
height: 100px;
background-color: #111;
}
.box2 {
position: absolute;
left: 0;
right: 0;
height: 100px;
width: 100px;
/* 水平居中 */
margin: 0 auto;
background-color: #333;
}
.box3 {
position: absolute;
top: 0;
bottom: 0;
height: 100px;
width: 100px;
/* 垂直居中 */
margin: auto 0;
background-color: #666;
}
.box4 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
/* 水平垂直居中 */
margin: auto auto;
background-color: #999;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
4.auto到底是什么?
◼ 800 = 200 + ml0 + mr0 + 0 + 0
◼ auto -> 交给浏览器你来处理
◼ width: auto;
-
行内非替换元素 -> width: 包裹内容
-
块级元素 ->width: 包含块的宽度
-
绝对定位元素 -> width: 包裹内容
5.绝对定位练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易云歌单案例练习</title>
<style>
/* 重置样式 */
a {
text-decoration: none;
color: #000;
}
/* 公共样式 */
.music_sprite02_music_icon {
display: inline-block;
width: 14px;
height: 11px;
background-image: url(../../images/music-sprite02.png);
background-position: 0 -24px;
}
.music_sprite02_play_icon {
display: inline-block;
width: 16px;
height: 17px;
background-image: url(../../images/music-sprite02.png);
background-position: 0 0;
}
/* 布局样式 */
div.item {
width: 140px;
height: 204px;
margin: 0 auto;
}
div.cover {
position: relative;
width: 140px;
height: 140px;
font-size: 12px;
}
div.cover .mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(../../images/music-sprite01.png) 0 0;
}
div.cover .bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 27px;
padding-left: 10px;
box-sizing: border-box;
background: url(../../images/music-sprite01.png) 0 -537px;
color: #ccc;
line-height: 27px;
}
div.cover .bottom .icon-music {
/* display: inline-block; */
/* width: 14px; */
/* height: 11px; */
margin-right: 5px;
/* background-image: url(./images/music-sprite02.png); */
/* background-position: 0 -24px; */
}
div.cover .bottom .icon-play {
position: absolute;
top: 5px;
right: 10px;
/* display: inline-block; */
/* width: 16px; */
/* height: 17px; */
/* background-image: url(./images/music-sprite02.png); */
/* background-position: 0 0; */
}
div.cover .bottom .icon-play:hover {
background-position: 0 -60px;
}
div.item .desc {
display: inline-block;
font-size: 14px;
}
div.item .desc:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<div class="cover">
<img class="top" src="../../images/music-album.jpg" alt="歌单封面">
<a class="mask" href="#" title="【国人纯音赏】聆听国人华章"></a>
<div class="bottom">
<i class="music_sprite02_music_icon icon-music"></i>
<span class="count">2488万</span>
<a class="music_sprite02_play_icon icon-play" href="#"></a>
</div>
</div>
<a class="desc" href="#" title="【国人纯音赏】聆听国人华章">【国人纯音赏】聆听国人华章</a>
</div>
</body>
</html>
六、粘性定位
另外还有一个定位的值是position: sticky，比起其他定位值要新一些.
- sticky是一个大家期待已久的属性;
- 可以看做是相对定位和固定(绝对)定位的结合体;
- 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;
- 当达到这个阈值点时, 就会
变成固定(绝对)定位;
1.使用sticky实现固定表头操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
width: 300px;
}
td {
border: 1px solid #000;
width: 80px;
}
tbody tr:nth-child(1) td {
border-top: none;
}
th {
border: 1px solid #000;
font-weight: 400;
}
thead {
display: table;
position: sticky;
top: 0;
width: 300px;
background-color: #ccc;
}
tbody {
display: table;
width: 300px;
}
</style>
</head>
<body>
<h1>我是h1</h1>
<table>
<thead>
<tr>
<td>吃饭</td>
<td>睡觉</td>
<td>打豆豆</td>
</tr>
</thead>
<tbody>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
<tr>
<td>哈哈哈1</td>
<td>哈哈哈2</td>
<td>哈哈哈3</td>
</tr>
</tbody>
</table>
</body>
</html>
sticky是相对于最近的滚动祖先包含滚动视口的(the nearest ancestor scroll container’s scrollport )
<!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>Document</title>
<style>
.box {
width: 500px;
height: 500px;
margin: 100px auto 0;
overflow: scroll;
background-color: #ccc;
}
.nav {
background-color: #f00;
color: #fff;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<h1>我是标题</h1>
<div class="nav">
<span>电脑</span>
<span>手机</span>
<span>衣服</span>
<span>鞋子</span>
</div>
<ul>
<li>电脑列表1</li>
<li>电脑列表2</li>
<li>电脑列表3</li>
<li>电脑列表4</li>
<li>电脑列表5</li>
<li>电脑列表6</li>
<li>电脑列表7</li>
<li>电脑列表8</li>
<li>电脑列表9</li>
<li>电脑列表10</li>
<li>电脑列表11</li>
<li>电脑列表12</li>
<li>电脑列表13</li>
<li>电脑列表14</li>
<li>电脑列表15</li>
<li>电脑列表16</li>
<li>电脑列表17</li>
<li>电脑列表18</li>
<li>电脑列表19</li>
<li>电脑列表20</li>
<li>电脑列表21</li>
<li>电脑列表22</li>
<li>电脑列表23</li>
<li>电脑列表24</li>
<li>电脑列表25</li>
<li>电脑列表26</li>
<li>电脑列表27</li>
<li>电脑列表28</li>
<li>电脑列表29</li>
<li>电脑列表30</li>
<li>电脑列表31</li>
<li>电脑列表32</li>
<li>电脑列表33</li>
<li>电脑列表34</li>
<li>电脑列表35</li>
<li>电脑列表36</li>
<li>电脑列表37</li>
<li>电脑列表38</li>
<li>电脑列表39</li>
<li>电脑列表40</li>
<li>电脑列表41</li>
<li>电脑列表42</li>
<li>电脑列表43</li>
<li>电脑列表44</li>
<li>电脑列表45</li>
<li>电脑列表46</li>
<li>电脑列表47</li>
<li>电脑列表48</li>
<li>电脑列表49</li>
<li>电脑列表50</li>
<li>电脑列表51</li>
<li>电脑列表52</li>
<li>电脑列表53</li>
<li>电脑列表54</li>
<li>电脑列表55</li>
<li>电脑列表56</li>
<li>电脑列表57</li>
<li>电脑列表58</li>
<li>电脑列表59</li>
<li>电脑列表60</li>
<li>电脑列表61</li>
<li>电脑列表62</li>
<li>电脑列表63</li>
<li>电脑列表64</li>
<li>电脑列表65</li>
<li>电脑列表66</li>
<li>电脑列表67</li>
<li>电脑列表68</li>
<li>电脑列表69</li>
<li>电脑列表70</li>
<li>电脑列表71</li>
<li>电脑列表72</li>
<li>电脑列表73</li>
<li>电脑列表74</li>
<li>电脑列表75</li>
<li>电脑列表76</li>
<li>电脑列表77</li>
<li>电脑列表78</li>
<li>电脑列表79</li>
<li>电脑列表80</li>
<li>电脑列表81</li>
<li>电脑列表82</li>
<li>电脑列表83</li>
<li>电脑列表84</li>
<li>电脑列表85</li>
<li>电脑列表86</li>
<li>电脑列表87</li>
<li>电脑列表88</li>
<li>电脑列表89</li>
<li>电脑列表90</li>
<li>电脑列表91</li>
<li>电脑列表92</li>
<li>电脑列表93</li>
<li>电脑列表94</li>
<li>电脑列表95</li>
<li>电脑列表96</li>
<li>电脑列表97</li>
<li>电脑列表98</li>
<li>电脑列表99</li>
<li>电脑列表100</li>
</ul>
</div>
</body>
</html>
2.position值对比
七、z-index
◼ z-index 属性用来设置定位元素的层叠顺序（仅对定位元素有效）
- 取值可以是
正整数、负整数、0
◼ 比较原则
- 如果是兄弟关系
- z-index越大，层叠在越上面
- z-index相等，写在后面的那个元素层叠在上面
- 如果不是兄弟关系
- 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
- 而且这2个定位元素必须有设置z-index的具体数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
position: relative;
height: 300px;
}
.box1 {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: aqua;
}
.box2 {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: blue;
/* z-index: -1; */
}
.box3 {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: greenyellow;
}
.info {
position: absolute;
z-index: 999;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2">
<div class="info">hahaha</div>
</div>
<div class="box3"></div>
</div>
</body>
</html>
扫一扫
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
