一、定位类型有哪些?
静态定位(默认)、相对定位、绝对定位、固定定位、粘滞定位
第一种:静态定位-static
特点:是浏览器默认上至下、左至右排序
第二种:相对定位
语法:position:relative
特点:
- 相对与自身在浏览器中的原来位置移动
- 不脱离文档流,会继续在标准流中占用一份空间
- 同一方向上的定位属性只能使用一个,right/left+top/bottom
- 常用于父级相对定位、子级绝对定位
例子:执行前 蓝色相对定位后:
蓝色div代码块:
.div2 { background-color: powderblue; /* 相对定位 特点:相对于子自身再浏览器中的默认位置(原来位置) 不脱离文档流 */ position: relative; top: 40px; left: 40px; }
第二种:绝对定位
语法:position:absolute
特点:
脱离标准流
不区分块级、行内、行内块级元素
同一方向上的定位属性只能使用一个,right/left+top/bottom
忽略祖先元素的padding
参考点:若绝对定位的元素有祖先元素也是定位流(绝对定位、固定定位、相对定位), 那么这个绝对定位的元素就会以该元素作为参考点,若有多个参考点,则就近原则。否则,都以body为参考点
例子: 蓝色包含黑色 蓝色div:相对定位 黑色div:绝对定位
执行前:执行后:
/* 父级 */ .div2 { position: relative; /* position: absolute; */ background-color: powderblue; } /* 子级 */ .div4 { width: 50px; height: 50px; background-color: rgb(96, 100, 99); /* 设置绝对定位 特性: 1、脱离文档流 原位置不保留 下面的东西会顶上来(它会覆盖下面的元素) 2、默认使用了绝对定位的元素 无论有无父元素 参数点是body 3、若祖先元素(父元素-爷爷元素-直系元素-body元素)设置了相对定位,则参照点为最近的祖先元素 */ position: absolute; top: 40px; left: 30px; }
第三种:固定定位
语法:
特点:position:flex
让固定盒子不随着滚动条的滚动而滚动
脱离文档流、不会占用标准流中的空间
不区分行内、块级、行内块级
同一方向上的定位属性只能使用一个,right/left+top/bottom
例子:一共50个div 不论怎么滑动 flex元素始终不动
执行前: 执行后:
.divBot { width: 100px; height: 100px; background-color: antiquewhite; /* 设置固定 */ top: 100px; left: 300px; position: fixed; }
第四种:粘滞定位(开始相对定位、到达设定的值为固定定位)
语法:position:sticky
特点:
不脱离文档流,保留元素原本位置
结合了relative和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>网易-导航栏</title> <style> * { margin: 0; padding: 0; /* 清除列表标志项 */ list-style: none; } .container { width: 726px; height: 8888px; background-color: antiquewhite; /* 水平居中 */ margin: 0 auto; } /* 设置一级菜单 */ .container ul li { background-color: #eee; width: 120px; /* height: 50px; */ text-align: center; line-height: 50px; font-size: 20px; /* 变成一行 */ float: left; /* 右侧边框 */ border-right: 1px solid red; } /* 设置a标签的颜色 */ .container ul li a { color: rgb(74, 73, 73); text-decoration: none; } /* 伪类选择器 悬浮 */ .container ul li:hover { background-color: rgb(175, 173, 173); } /* 设置二级菜单隐藏 */ .container ul li ul { /* 因为它不占据位置 */ display: none; } /* 设置二级菜单的显示——滑过一级菜单时 设置显示二级菜单 */ .container ul li:hover ul { display: block; } /* 设置导航栏粘滞定位 */ .container ul { position: sticky; /* 粘滞定位 特性:relative+fixed定位一个定位属性 默认相对定位达到阈值就是固定定位 */ top: 0; } </style> </head> <body> <div class="container"> <!-- 占位div --> <div style="height: 300px;"></div> <ul> <li><a href="#">首页</a></li> <li><a href="#">亲自旅游</a></li> <li> <a href="#">居家生活</a> <!-- 二级菜单栏 --> <ul> <li>样式1</li> <li>样式2</li> <li>样式3</li> </ul> </li> <li> <a href="#">宠物生活</a> <!-- 二级菜单栏 --> <ul> <li>样式1</li> <li>样式2</li> <li>样式3</li> </ul> </li> <li><a href="#">美食酒水</a></li> <li><a href="#">个护清洁</a></li> </ul> </div> </body> </html>