本教程案例在线演示
有路网PC端
有路网挪动端
收费配套视频教程
收费配套视频教程
教程配套源码资源
教程配套源码资源
定位
position属性
static：默认值，没有定位
relative：绝对定位
absolute：相对定位
fixed：固定定位
规范文档流
规范文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简略的失常的布局形式。
个别在HTML元素分为两种：块级元素和行内元素。像div,p这些的元素属于块级元素，块级元素是从上到下一行一行的排列；默认一个块级元素会占用一行，而跟在前面的元素会另起一行排列；
行内元素是在一行中程度安排，从左到右的排列；span,strong等属于行内元素。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body><div style="background-color:dodgerblue">我是块级元素，我独自占一行 我独自占一行 我独自占一行</div><div style="background-color:yellow">我是块级元素，我一行一行的排列，我一行一行的排列，我一行一行的排列</div><span style="background-color:green">我的行内元素，我程度的排列，我程度的排，我程度的排，我程度的排列，我程度的排列</span><span style="background-color:gray">我是行内元素，没有那么王道，没有那么王道，没有那么王道，没有那么王道，没有那么王道</span></body></html></body></html>static定位
position:static
元素没有定位，以规范流形式显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>position属性</title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>@charset "gb2312";/* CSS Document */div { width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px;}#father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px;}#first { background-color:#FC9; border:1px #B55A00 dashed;}#second { background-color:#CCF; border:1px #0000A8 dashed;}#third { background-color:#C5DECC; border:1px #395E4F dashed;}绝对定位
relative属性值
绝对本身原来地位进行偏移
偏移设置：top、left、right、bottom能够用left来形容盒子向右挪动；
能够用right来形容盒子向左的挪动；
能够用top来形容盒子向下的挪动；
能够用bottom来形容盒子的向上的挪动；
如果是正数就是相同的方向。
绝对定位的盒子，不脱离规范流，老家保留地位，其后的元素不能占用其原有地位。
绝对定位的主要用途是作为其外部元素相对定位时的参照规范，有绝对于我之义。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>position属性</title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>@charset "gb2312";/* CSS Document */div { width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px;}#father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px;}#first { background-color:#FC9; border:1px #B55A00 dashed; position:relative; top:10px; left:50px;}#second { background-color:#CCF; border:1px #0000A8 dashed;}#third { background-color:#C5DECC; border:1px #395E4F dashed;}相对定位
absolute属性值
偏移设置： left、right、top、bottom
应用了相对定位的元素以它最近的一个“曾经定位”的“先人元素” 为基准进行偏移。如果没有曾经定位的先人元素，那么会以浏览器窗口为基准进行定位。相对定位的元素从规范文档流中脱离，其后的元素会占据其原有的地位。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>position属性</title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>@charset "gb2312";/* CSS Document */div { width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px;}#father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px;}#first { background-color:#FC9; border:1px #B55A00 dashed; position: absolute; top:10px; right: 10px;}#second { background-color:#CCF; border:1px #0000A8 dashed;}#third { background-color:#C5DECC; border:1px #395E4F dashed;}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>position属性</title><link href="css/style2.css" rel="stylesheet" type="text/css" /></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>@charset "gb2312";/* CSS Document */div { width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px;}#father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px; position: relative;}#first { background-color:#FC9; border:1px #B55A00 dashed; position: absolute; top:10px; right: 10px;}#second { background-color:#CCF; border:1px #0000A8 dashed;}#third { background-color:#C5DECC; border:1px #395E4F dashed;}练习 微信音讯提醒
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #dot{ height: 20px; width: 20px; background-color: red; border-radius: 50%; line-height: 20px; text-align: center; font-size: 14px; position: absolute; top:-10px; right: -10px; } #weixin{ height: 80px; width: 80px; font-size: 20px; line-height: 80px; text-align: center; border: 1px solid green; position: relative; } </style></head><body><div id="weixin">微信 <div id="dot">2</div></div></body></html>z-index属性
调整元素定位时重叠层的高低地位
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性能够设置各元素之间的重叠高下关系
z-index值大的层位于其值小的层上方
网页元素透明度
CSS设置元素透明度
opacity:x
x值为0~1，值越小越通明
opacity:0.4;
filter:alpha(opacity=x)
x值为0~100，值越小越通明
filter:alpha(opacity=40);
练习 香山红叶
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>z-index属性</title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><div id="content"> <ul> <li><img src="image/maple.jpg" alt="香山红叶" /></li> <li class="tipText">京秋魅力•相约共赏香山红叶</li> <li class="tipBg"></li> <li>工夫：11月16日 星期六 8:30</li> <li>地点：朝阳区西大望路珠江帝景K区正门前汇合</li> </ul></div></body></html>@charset "gb2312";/* CSS Document */ul, li { padding:0px; margin:0px; list-style-type:none;}#content { width:331px; overflow:hidden; padding:5px; font-size:12px; line-height:25px; border:1px #999 solid;}#content ul { position:relative;}.tipBg, .tipText { position:absolute; width:331px; height:25px; top:100px;}.tipText { color:#FFF; text-align:center; z-index:1;}.tipBg { background:#000; opacity:0.5; filter:alpha(opacity=50);}我的项目实战 有路网首页轮播图
lunbo.css
.lunbotu{ width: 750px; position: relative;}.lunbotu img{ width: 750px;}.lunbotu ul{ position: absolute; right: 12px; bottom: 20px;}.lunbotu li{ display: inline-block; width: 20px; height: 20px; background-color: gray; text-align: center; line-height: 20px; color: white; border-radius: 50%; margin: 0 4px;}li:hover{ background-color: tomato;}youlu-lunbo.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="lunbo.css"></head><body> <div class="lunbotu"> <img src="img/lunbo.jpg" alt=""> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div></body></html>固定定位
position: fixed;
仿简书网站顶部导航
<!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> .top-nav{ height: 80px; width: 100%; background-color: pink; position: fixed; top: 0px; } </style></head><body style="height: 2000px;"> <div class="top-nav">顶部导航</div></body></html>