一、定位
- 定位可以对页面元素进行微调（页面大都使用float进行布局，定位进行微调）
- position的属性值：
static：默认值，元素是静止的，没有开启定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
sticky：粘滞定位
二、相对定位（relative）
2.1 特点
- 元素开启相对定位后，如果不设置偏移量，元素不会发生任何的变化
- 相对定位是参照于元素在文档流中的位置进行定位的
- 相对定位会提升元素的层级
- 相对定位不会使元素脱离文档流
- 相对定位不会改变元素的性质：块还是块，行内还是行内
2.2 偏移量（offset）
top、bottom、left、right
三、绝对定位（absolute）
3.1 特点
- 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
- 绝对定位会提升元素的层级
- 绝对定位会使元素脱离文档流
- 绝对定位会改变元素的性质：块变成行内，行内变成块
- 绝对定位是相对于其包含块进行定位的
包含块（containing block）：包含块就是离当前元素最近的祖先块元素
- 决定定位的包含块：
包含块就是离它最近的开启了定位的祖先元素，
如果所有的祖先元素没有开启定位，则根元素就是它的包含块
- html（根元素，初始包含块）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } /* 轮播图 */ .banner-list{ width: 590px; height: 470px; /* overflow: hidden; */ margin-top: 150px; margin-left: 300px; position: relative; } .banner-list li{ position: absolute; } /* 通过修改元素的层级来显示指定的图片 */ .banner-list li:nth-child(1){ z-index: 1; } /* 小圆点 */ .pointer{ position: absolute; z-index: 9999; bottom: 20px; left: 50px; } .pointer a{ /* display: block; */ /* float设置之后脱离文档流，行内元素变为了块元素 */ float: left; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, .6); /* 给a标签添加border 这样a:hover整体时不会浮动， 缺点： 若为其他颜色，则会显示 若为transparent，则颜色会由background-color来填充 所以，需要使用background-clip来裁剪（只要内容区的即可）， 但是又占据了border的位置 */ border: 2px solid transparent; background-clip: content-box; margin: 0 2px; } .pointer a:hover{ background-color: #fff; /* 添加了border，使得a标签变大，发生浮动 */ border: 2px solid rgba(255, 255, 255, .6); } </style> </head> <body> <!-- 轮播图 --> <ul class="banner-list"> <li><a href="javascript:;"><img src="./img/banner1.jpg"></a></li> <li><a href="javascript:;"><img src="./img/banner2.jpg"></a></li> <li><a href="javascript:;"><img src="./img/banner3.jpg"></a></li> <li><a href="javascript:;"><img src="./img/banner4.jpg"></a></li> <!-- 小圆点 --> <div class="pointer"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </ul> </body> </html>
三、固定定位（fixed）
- 参照于浏览器的视口进行参照
四、粘滞定位（sticky，兼容性不好）
- 与相对定位的特点基本一致
- 不同点：粘滞定位可以在元素到达某个时将其固定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航条及粘滞定位</title> <style> /* 去除不必要的基础样式 */ *{ margin: 0px; padding: 0px; text-decoration: none; list-style-type: none; } body{ height: 1000px; } .nav_bar{ width: 1210px; height: 48px; background-color: #E8E7E3; /* 整个导航条居中 */ margin: 0 auto; margin-top: 100px; /* 粘滞定位结合偏移量 局限性：浏览器兼容不佳 */ position: sticky; top: 10px; } .nav_menu li{ /* 浮动 */ float: left; width: 150px; /* 文字垂直方向居中 */ line-height: 48px; /* 文字水平居中 */ text-align: center; padding: 0 11.33px; } .nav_menu li a{ font-size: 18px; color: #666; } /* 鼠标经过时，样式的改变 */ .nav_menu li:hover{ background-color: black; } .nav_menu li:hover a{ color: white; } </style> </head> <body> <!-- 设置横向导航条 --> <nav class="nav_bar"> <ul class="nav_menu"> <li><a href="javascript:;">HTML/CSS</a></li> <li><a href="javascript:;">Browser Side</a></li> <li><a href="javascript:;">Server Side</a></li> <li><a href="javascript:;">Programming</a></li> <li><a href="javascript:;">XML</a></li> <li><a href="javascript:;">Web Building</a></li> <li><a href="javascript:;">Reference</a></li> </ul> </nav> </body> </html>
五、z-index设置层级
- 对于开启了定位元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大，元素的层级越高
元素的层级越高越优先显示
如果元素的层级一样，则优先显示靠下的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>z-index</title> <style> .box1, .box2, .box3{ width: 200px; height: 200px; position: absolute; } .box1{ background-color: violet; z-index: 1; } .box2{ background-color: rgba(9, 136, 136, 0.726); left: 50px; top: 50px; z-index: 2; } .box3{ background-color: yellowgreen; left: 100px; top: 100px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>