, 下方的网页内容会被顶部导航栏覆盖 , 这里需要设置一个上外边距 , 上外边距值大于等于 顶部导航栏的高度 ;
/* 顶部的固定定位盒子高度 100px 由于其脱标会覆盖标准流元素...此处标准流盒子设置 100px 的外边距 防止被顶部的固定定位盒子覆盖 */
margin-top: 55px;
由于设置 绝对 / 固定 定位 , 会将元素变为行内块元素 , 其宽度是内部子元素的宽度..., 如果要精确放置顶部导航栏的位置 , 顶部导航栏盒子必须设置宽度 , 这里选择设置其宽度为 100% ;
/* 定位元素如果不设置宽度 默认就是内部内容的宽度 */
/* 如果要设置盒子...*/
z-index: 3;
顶部导航栏完整样式如下 :
.top {
/* 定位元素如果不设置宽度 默认就是内部内容的宽度 */
/* 如果要设置盒子 */
/* 该盒子要设置成占用整个水平宽度...;
首先 , 将盒子的顶部设置到浏览器垂直中线位置 ,
position: fixed;
/* 该盒子在浏览器左侧 */
/* 上边偏移 50% 之后减去 150 居中设置 */