1.固定定位（div不动）
<style>
div{
width: 200px;
height: 100px;
background: red;
/* 固定定位 */
position: fixed;
right: 30px;
top: 40%;
}
</style>
</head>
<body>
<div>固定定位</div>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
<h2>希望自己拿到高薪</h2>
</body>
2.锚点（点击链接跳转）
<body>
<!-- <a href="#对应id名字"></a> -->
<a href="#demo">锚点</a>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2 id="demo">希望你快乐</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
<h2>内容</h2>
</body>
3.固定位置与锚点的案例
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 600px;
font-size: 60px;
line-height: 600px;
text-align: center;
font-weight: bold;
color:#FFF;
}
h1{
position: fixed;
right: 0;
top: 0;
width: 100px;
}
a{
text-decoration: none;
color:#FFF
}
</style>
</head>
<body>
<h1>
<a href="#floor1">一楼</a>
<a href="#floor2">二楼</a>
<a href="#floor3">三楼</a>
<a href="#floor4">四楼</a>
<a href="#floor5">五楼</a>
<a href="#floor6">六楼</a>
</h1>
<div id="floor1" style="background: #9f1;">珠宝</div>
<div id="floor2" style="background: #ff0;">女装</div>
<div id="floor3" style="background: #f0f;">女鞋</div>
<div id="floor4" style="background: #00f;">女包</div>
<div id="floor5" style="background: #f00;">精品女装</div>
<div id="floor6" style="background: #0ff;">美食电影院</div>
</body>
</html>
4.绝对定位根据哪里来定位的
<style>
.big{
width: 500px;
height: 300px;
padding:50px;
border:10px solid #000;
background: cyan;
/* 父相子绝 */
position: relative;
}
.son{
width: 200px;
height: 100px;
background: red;
position: absolute; /* 当你没有写横纵坐标 那么是根据参照物的content区域来定位的 */
left: 0;
top: 0;
/* 当你写了横纵坐标 你会发现 绝对定位是根据参照物的padding区域来进行定位的 */
left:-10px;
top:-10px;
}
</style>
</head>
<body>
<div class="big">
<div class="son"></div>
</div>
</body>
5.透明度
<style>
div{
width: 200px;
height: 200px;
/* 1、透明 IE8以下不支持 但是好用 rgba*/
background: rgba(0, 0, 0, 0.5);
color:#f00;
}
p{
width: 300px;
height: 399px;
/* 2、透明 需要做兼容 来支持各个版本 */
opacity: 0.5; /* 透明 取值0~1 */
filter: alpha(opacity="50"); /* 取值是0~100 这个是兼容 */（文字和图片都被透明度化了）
background: #000;
color:#f00;
}
</style>
</head>
<body>
<div>火狐，我们程序员心中的白月光</div>
<p>IE,很多正式场合还需要他，不可以丢弃</p>
</body>
6.粘性定位
<style>
div{
width: 1200px;
height: 300px;
background: rgba(22, 33, 99, .5);
/* 设置粘性定位 注意 必须写坐标 */
position: sticky;
left: 0;
top: 0;
}
</style>
</head>
<body>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<div>粘性定位，一般应用于移动端，不可以有其他元素来包裹</div>
从这里开始 不动 下面文字滚动
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
<h2>今天我们学习了定位</h2>
</body>
7.绝对定位进行水平居中
<style>
.big{
width: 700px;
height: 600px;
background: salmon;
/* 父相子绝 */
position: relative;
}
.son{
width: 200px;
height: 300px;
background: seagreen;
/* 我想要水平居中 可以使用绝对定位来做 */
position: absolute;
left: 50%;
top: 50%;
/* margin-left: 负宽度的一半; */
/* margin-top:负高度一半 */
margin-left: -100px;
margin-top: -150px;
}
</style>
</head>
<body>
<div class="big">
<div class="son"></div>
</div>
</body>
8.?默认情况下 绝对定位 是根据参照物的内容区域content定位的?
<style>
.big{
width: 200px;
height: 200px;
background: cyan;
padding:50px;
position: relative;
}
span{
background: red;
position: absolute;
/* 默认情况下 绝对定位 是根据参照物的内容区域content定位的 */
}
</style>
</head>
<body>
<div class="big">
<span>子元素</span>
</div>
</body>
9.腾讯大学页面色块
?先写html
<!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>腾讯大学</title>
<!-- 外部样式表的引入 -->
<link rel="stylesheet" href="../css/tx.css">
</head>
<body>
<!-- 头部直接写版心 因为外围是白色 -->
<div id="header" class="same"></div>
<!-- 大图区域 -->
<div id="banner">
<img src="" alt="">
</div>
<!-- 广告区域 因为外围是白色 直接写版心-->
<div id="adver" class="same"></div>
<!-- 主体 因为外围有颜色 所以写外围+版心 -->
<div id="mainWrapper">
<div id="main" class="same">
<div class="mainLeft">
<div class="remen"></div>
<div class="ganhuo"></div>
<div class="jingpin"></div>
</div>
<div class="mainRight"></div>
</div>
</div>
<!-- 尾部 因为外围有颜色 所以写外围+版心 -->
<div id="footerWrapper">
<div id="footer" class="same"></div>
</div>
</body>
</html>
再写css
/* 去除页面缝隙 */
*{
margin: 0;
padding: 0;
}
/* 先将页面中所有超链接去除下划线 */
a{
text-decoration: none;
}
/* 因为css中 文字大小可以被继承 我先设置文字大小都是12px */
body{
font-size: 12px;
}
/* 因为页面版心宽度一致 都需要水平居中浏览器 所以我直接给这几大块的版心 设置一个相同的class名字 */
.same{
width: 1068px;
margin:0 auto;
}
/* 设置头部高度 */
#header{
height: 78px;
background: pink;
}
/* 设置大图区域 */
#banner{
width: 100%;
height: 396px;
background: yellow;
}
/* 设置广告区域大小 */
#adver{
height: 36px;
background: yellowgreen;
}
/* --------主体 区域---- */
#mainWrapper{
background: #d6dae3;
}
/* 设置主体大小 */
#main{
height: 1100px;
background: cyan;
}
.mainLeft{
width: 780px;
height: 1044px;
background: red;
float: left;
}
.remen{
width: 780px;
height: 353px;
background: #FFF;
}
.ganhuo{
margin-top: 20px;
margin-bottom: 13px;
width: 780px;
height: 206px;
background: #FFF;
}
.jingpin{
width: 780px;
height: 450px;
background: #FFF;
}
.mainRight{
width: 267px;
height: 1044px;
background: palegreen;
float: right;
}
/* ----------尾部---- */
#footerWrapper{
background: #f6f6f6;
}
/* 设置尾部大小 */
#footer{
height: 270px;
background: hotpink;
}