定位
布局的外围：css摆放盒子的地位
定位：将盒子定在某一个地位，自在的沉没其它盒子下面
定位=定位模式+边偏移
边偏移
三种布局机制的高低程序
规范流 + 浮动 + 定位
定位模式
选择器 {position:属性值}动态定位（理解）
static:动态定位 动态定位是定位模式中的默认属性，没有边偏移，在网布布局中简直不必
<!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> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: blue; position: static; top: 200px; left: 200px; } </style></head><body> <div></div></body></html>relative（理解）
绝对定位依据本身规范流的地位来进行边偏移。
<!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> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: blue; /*改为绝对定位*/ position: relative; top: 200px; left: 200px; } </style></head><body> <div></div></body></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> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: blue; } .box2 { position: relative; top: 200px; left: 200px; background-color: brown; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></body></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> <style> * { margin: 0; padding: 0; } .box { width: 600px; height: 600px; background-color: brown; position: relative; } .box1, .box2 { width: 200px; height: 200px; background-color: yellow; } .box1 { background-color: red; position: absolute; top: 100px; left: 300px } </style></head><body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div></body></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> <style> * { margin: 0; padding: 0; } .pic { position: relative; width: 600px; height: 600px; margin: 200px auto; } .arr-left { position: absolute; top: 300px; left: 0; } .arr-right { position: absolute; top: 300px; right: 0!important; } </style></head><body> <div class="pic"> <img src="./image/img-1.gif" alt=""> <img src="./image/箭头_线性_左.png" alt="" class="arr-left"> <img src="./image/箭头_线性_右.png" alt=" " class="arr-right "> </div> < </body></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> <style> * { margin: 0; padding: 0; } .box { position: relative; width: 310px; height: 190px; padding: 15px; margin: 100px auto; border: 1px solid #ccc; } img:nth-child(2) { position: absolute; top: 0; left: 0; } img:nth-child(3) { position: absolute; bottom: 0; right: 0; } </style></head><body> <div class="box"> <img src="./image/adv.jpg" alt=""> <img src="./image/top.gif" alt=""> <img src="./image/right.gif" alt=""> </div></body></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> <style> * { margin: 0; padding: 0; } body { height: 3000px; } img { position: fixed; width: 200px; top: 200px; left: 0; } p { width: 100%; height: 100px; margin: 50px 0px; background-color: blue; } </style></head><body> <img src="./image/img-1.gif" alt=""> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p></body></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> <style> * { margin: 0; padding: 0; } .header { position: fixed; top: 0; width: 100%; background-color: #FCFCFC; text-align: center; } .content { width: 1020px; height: 1760px; margin: auto; margin-top: 44px; } .ad-l { position: fixed; top: 200px; left: 0; } .ad-r { position: fixed; top: 200px; right: 0; } </style></head><body> <img src="./image/ad-l.png" alt="" class="ad-l"> <img src="./image/ad-r.png" alt="" class="ad-r"> <div class="header"> <img src="./image/top.png" alt="" class="top"> </div> <div class="content"> <img src="./image/box.png" alt=""> </div></body></html>相对定位的盒子居中对齐
原理
- 先挪动父元素的一半 left:50%
- 挪动本身宽度的负一半
<!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> .box { position: absolute; left: 50%; margin-left: -200px; width: 400px; height: 400px; background-color: green; } </style> </head><body> <div class="box"></div></body></html>重叠程序
应用定位布局时，通常会呈现盒子重叠的状况下，定位的盒子青出于蓝，z-index能够扭转定位的盒子重叠程序的问题
1.z-index的值能够是正整数 负整数 0等等。数值越大，盒子越靠上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> * {margin: 0; padding: 0; } div { position: absolute; width: 200px; height: 200px; background-color: greenyellow; } .box2 { top: 100px; left: 100px; background-color: red; z-index: 6; } .box3 { top: 200px; left: 200px; background-color: grey; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></body></html>定位扭转display属性
display是显示模式 能够通过以下模式扭转display属性
- 应用inline-block转换行内块显示模式
- 应用float转换相似行内块显示模式，然而脱离规范流
- 应用定位模式中的absolute或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> span { position: absolute; width: 200px; height: 200px; text-align: center; line-height: 200px; background-color: indigo; } </style></head><body> <span>尧子陌</span></body></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> <style> .father { width: 600PX; height: 600PX; background-color: PINK; } .son { position: absolute; width: 200px; height: 200px; background-color: blue; margin-top: 100px; } </style></head><body> <div class="father"> <div class="son"></div> </div></body></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> <style> * { margin: 0; padding: 0; } .container { position: relative; width: 520px; height: 280px; margin: 200px auto; background-color: pink; } li { list-style: none; } .arr-left, .arr-right { /* 设置定位的元素 能够不必转换显示模式 */ position: absolute; /* 定位盒子的盒子要实现居中对齐的成果 先走父元素的一半 再走本身的负一半 */ top: 50%; margin-top: -15px; width: 20px; height: 30px; color: white; line-height: 30px; text-decoration: none; background-color: rgba(0, 0, 0, 0.3); } .arr-left { text-align: left; left: 0; border-radius: 0px 50% 50% 0px; } .arr-right { text-align: right; right: 0; border-radius: 50% 0px 0px 50%; } /* 并集选择器个体申明 */ .arr-left:hover, .arr-right:hover { color: royalblue; background-color: rgba(0, 0, 0, 0.8); } .circle { position: absolute; left: 50%; margin-left: -60px; bottom: 20px; width: 120px; height: 20px; background-color: pink; border-radius: 10px; background-color: rgba(255, 255, 255, 0.6); } .circle li { float: left; width: 10px; height: 10px; margin: 5px; background-color: white; border-radius: 50%; } /* 权重问题 所以要权重叠加 确保以后li失效 */ .circle .current { background-color: red; } </style></head><body> <div class="container"> <!-- 左按钮 --> <a href="#" class="arr-left"><</a> <!-- 右按钮 --> <a href="#" class="arr-right">></a> <!-- 图片--> <img src="./image/taobao.jpg" alt=""> <!-- 底部导航栏 --> <ul class="circle"> <li></li> <li></li> <li></li> <li class="current "></li> <li></li> <li></li> </ul> </div></body></html>定位总结
注意事项
- left right不能同时应用
- top bottom不能同时应用
网页布局的侧边广告栏问题
如何让一个侧边栏凑近版心对齐呢，应用固定定位，走浏览器视口的一半，再走版心的一半+本身的宽度
<!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> * { margin: 0; padding: 0; } .side-nav { position: fixed; top: 50%; margin-top: -100px; left: 50%; margin-left: -800px; width: 200px; height: 200px; background-color: blue; } .container { width: 1200px; height: 1800px; background-color: pink; margin: auto; margin-bottom: 20px; } </style></head><body> <div class="side-nav"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div></body></html>