一、css 定位基础笔记
1.position: (posit 放,放置 + ion 表名词 → 放出的〔立场〕=位置)
static(默认) (stat 站,立 + ic …的 → 立着不动的 → 静止的)
relative (adj.相对于 n.亲戚)
absolute (绝对的)
fixed (fix 使固定)
sticky (粘性的)
z-index (量度)
2.relative:
如果未设置定位偏移量,对本身无影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom 是相对于‘自身’偏移
3.absolute:
使元素完全脱离文档流
使内联元素支持宽高(让内联具备快的性质)
使快元素的宽高由内容决定(让快决定内联的性质)
如果祖先元素有定位,则相对祖先元素位移,无的话相对文本位移
4.fixed:
使元素完全脱离文档流
使内联元素支持宽高(让内联具备快的性质)
使快元素的宽高由内容决定(让快决定内联的性质)
相对整个浏览窗口进行偏移
5.sticky黏性定位
在指定位置,进行黏性定位
(暂时认为:只对一级标签管用)
6.z-index定位层级
a.存在position时,z-index才生效
b.优先考虑同级或者父级的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>
/* body{height: 1000px;}
.box1{ border: 5px red solid; margin-top: 500px; }
.box2{ width: 100px; height: 100px; background: springgreen; position: absolute; top: 300px; left: 130px;}
.box3{ width: 100px; height: 100px; background: yellow; position: absolute;} */
/* body{height: 3000px; background: darkmagenta;}
.box1{ border: 5px red solid; margin-top: 300px; }
.box2{ width: 100px; height: 100px; background: springgreen; position: fixed; top: 300px; left:200px ; }
.box3{ width: 100px; height: 100px; background: yellow;} */
/* body{height: 3000px; background: darkmagenta;}
.box1{ border: 5px red solid; margin-top: 300px; position: sticky; top: 100px;}
.box2{ width: 100px; height: 100px; background: springgreen; }
.box3{ width: 100px; height: 100px; background: yellow;} */
body{height: 3000px; background: darkmagenta; }
.box1{ border: 5px red solid; margin-top: 100px;position: relative; z-index: 2;}
.box2{ background: rgb(2, 250, 2); width: 100px; height: 100px; position: relative; z-index: 3000;}
.box3{ background: mediumblue; width: 200px; height: 200px; margin-top: -50px; position: relative; z-index: 3;}
.box4{ border: 5px rgb(238, 255, 0) solid;}
</style>
</head>
<body>
<!-- <div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div> -->
<div class="box1">
<div class="box2"></div>
</div>
<div class="box4">
<div class="box3"></div>
</div>
</body>
</html>
二、定位实现下拉列表框
1.写好样式并定好位后,用 display:none 隐藏
2.利用伪元素 :hover{dispaly:block} 显示