本文介绍了如何使用CSS实现淘宝式的侧边栏导航栏，通过fixed定位和margin调整位置。同时讲解了遮盖的原理，即定位盒子的遮盖顺序和z-index属性的使用。此外，还提及了浏览器兼容性问题，特别是针对IE的hack方法，如条件注释语句。内容涵盖了前端开发中的布局技巧和浏览器兼容性策略。
2021/3/25–前端第14天–淘宝导航栏、遮盖、z-index、hack等
淘宝导航栏：固定定位
<style>
.main {
width: 1200px;
margin: 0 auto;
height: 2000px;
background-color: pink;
}
.slider {
height: 200px;
width: 60px;
background-color: green;
/* 淘宝侧边栏 */
position: fixed;
/* 此处是right，下面margin必为margin-right，向哪里移动参考哪边 */
left: 50%;
bottom: 200px;
margin-left: 610px;
}
</style>
</head>
<body>
<div class="main">
<h1>1-1-1</h1>
<h1>2-2-2</h1>
<h1>3-3-3</h1>
<h1>4-4-4</h1>
<h1>5-5-5</h1>
<h1>6-6-6</h1>
<h1>7-7-7</h1>
<h1>8-8-8</h1>
<h1>9-9-9</h1>
<h1>10-10-10</h1>
<h1>11-11-11</h1>
<h1>12-12-12</h1>
<h1>13-13-13</h1>
<h1>14-14-14</h1>
<h1>15-15-15</h1>
<h1>16-16-16</h1>
<h1>17-17-17</h1>
<h1>18-18-18</h1>
<h1>19-19-19</h1>
<h1>20-20-20</h1>
</div>
<div class="slider"></div>
</body>
遮盖
盒子遮盖顺序：
1、设置定位的盒子遮住没有定位的盒子（包括浮动）
2、都设置定位，后面的盒子遮住前面的。
设置了定位的盒子可以用z-index设置遮盖顺序。
z-index 只适用于有定位的盒子，表示顺序，没有单位。
默认0
拼爹现象：父元素z-index高者，就算子元素z-index比较低也会显示在前面。
.box1 {
background-color: green;
position: relative;
top: 150px;
left: 0px;
/* 设置顺序 */
z-index: 100;
}
hack
五大浏览器！复习面试
谷歌chrome（blink内核
火狐firefox（gecko
欧朋opera （谷歌blink
IE（trident edge（斯巴达
苹果safari（webkit
国内：
chrome、QQ、百度、ie、微信、uc、safari
百度：网站流量平台查看各种浏览器、屏幕分辨率、流量等的查询监测。
兼容：
https://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/
查看不同浏览器效果
工具：IE tester、用360极速浏览器模拟
浏览器模式用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理（User-Agent）字符串的值。
文档模式用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。
hack：
html hack
从黑客依此引申而来，就是针对不同的浏览器去写不同的html和css。分为html的hack和css的hack。
关于对IE 浏览器兼容的办法（上图代码）：
工具：IE tester （模拟各个版本浏览器）
<body>
<!-- 在ie9 版本以下显示 -->
<h1>ickt</h1>
<!--[if lte IE 9]>
<h1>专业的前端培训机构</h1>
<![endif]-->
</body>
更多html hack 条件注释语句********
扫一扫
1344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
