一、核心要点分析
----
实现下图所示功能 :
上方有一个固定导航栏 , 水平居中设置 ;
左右两侧各一个广告栏 , 垂直居中设置 ;
1、顶部导航栏要点
顶部导航栏要点 :
使用固定定位 , 上边偏移设置为...0 , 即可设置为顶部导航栏 , 其位置不受页面滚动影响 ;
/* 设置固定定位 */
position: fixed;
top: 0;
由于顶部的导航栏设置了 绝对定位 , 该元素是脱标的..., 下方的网页内容会被顶部导航栏覆盖 , 这里需要设置一个上外边距 , 上外边距值大于等于 顶部导航栏的高度 ;
/* 顶部的固定定位盒子高度 100px 由于其脱标会覆盖标准流元素..., 如果要精确放置顶部导航栏的位置 , 顶部导航栏盒子必须设置宽度 , 这里选择设置其宽度为 100% ;
/* 定位元素如果不设置宽度 默认就是内部内容的宽度 */
/* 如果要设置盒子...设置水平居中 */
text-align: center;
/* 该盒子位于最上层 不要被其它盒子覆盖 */
z-index: 3;
}
2、固定定位垂直居中设置
设置左右两侧的广告栏在浏览器中垂直居中设置
