2021-07-20 各种定位与侧下拉列表的集合

：hover的延申

1. a:hover  鼠标悬停时链接的变化 鼠标悬停时内容的隐藏与显示

        选择器：hover要显示的元素【必须在选择器里面】{} a 标签可以切换为其他的选择器

兄弟选择器：

P+a:相邻的紧挨着的下一个元素。

p~a:后面的所有的元素。

 

 

1.固定定位：

语法：position:fixed+边偏移量【left/top/right/bottom】才能让元素达到自己想要的位置

应用：参考小小千

实现效果：div或者某些元素固定在页面的某个位置

部分代码：

效果显示：

2.粘性定位：

语法：positio：sticky

应用：参考工商银行导航栏

实现效果：如果前面有定位，并且元素有高度，那么他会滑过元素高度之后再执行固定定位，如果前面元素没有或者元素的高度之和小于top后面的属性，它直接开始固定定位

部分代码：

效果显示：

 

 

 

3.绝对定位

语法：position：absolute

应用：参考侧边导航栏

实现效果：注意点

如果父级元素有定位，则根据父级元素进行移动，如果父级元素没有定位，则逐级往上找有定位的元素，找到之后按照这个元素的位置开始定位，如果没有找到则根据浏览器窗口进行定位。 

部分代码：

效果显示：

 

 

 

4.相对定位：

语法：position:relative

应用：参考侧边导航栏

注意点:根据自身的位置进行移动。

部分代码：

效果显示：

练习一：小小千

练习二：侧拉列表

部分代码：

 

 

 

 

 

 

效果显示：