css怎样使顶端悬浮导航栏不遮住下面一层页面内容 如何让CSS导航固定在页面顶端。
HTML5\u5982\u4f55\u624d\u80fd\u8ba9\u5bfc\u822a\u680f\u56fa\u5b9a\u9876\u90e8\u4e0d\u52a8\uff0c\u4e14\uff01\u4e14\uff01\u4e14\uff01\u4e0d\u906e\u6321\u4f4f\u4e0b\u9762\u7684DIV\uff1f\uff1f\uff1fHTML5\u8ba9\u5bfc\u822a\u680f\u56fa\u5b9a\u9876\u90e8\u4e0d\u52a8\u4e14\u4e0d\u906e\u6321\u4f4f\u4e0b\u9762\u7684DIV\u65b9\u6cd5\u5982\u4e0b\uff1a
1\uff0c\u9996\u5148\u5728html\u4e2d\uff0c\u6dfb\u52a0\u826f\u597d\u7684\u5bfc\u822a\u5185\u5bb9\u3002
2\uff0c\u540e\u8005\u662f\u7f51\u9875\u7684\u5177\u4f53\u5185\u5bb9\uff0c\u8fd9\u91cc\u7684\u4ee3\u7801\u6bd4\u8f83\u7b80\u5355\u3002
3\uff0c\u5728\u6837\u5f0f\u4e2d\uff0c\u9996\u5148\u5728\u83dc\u5355\u4e2d\u5b9a\u4e49\u4e00\u4e9b\u6837\u5f0f\u3002
4\uff0c\u6b64\u65f6\uff0c\u5728\u8fd0\u884c\u9875\u9762\u65f6\uff0c\u6eda\u52a8\u6761\u6eda\u52a8\u540e\u5bfc\u822a\u5c06\u6d88\u5931\u3002
5\uff0c\u4e3a\u4e86\u5c06\u5bfc\u822a\u680f\u56fa\u5b9a\u5728\u9876\u90e8\uff0c\u53ef\u4ee5\u6dfb\u52a0\u6837\u5f0f\u4f4d\u7f6e\uff1a\u56fa\u5b9a\uff1b\u6700\u9ad8\uff1a0;\u5728\u5bfc\u822a\u5bb9\u5668\u4e2d\uff0c\u952e\u662f\u7b2c\u4e00\u4e2a\u6837\u5f0f\uff0c\u56e0\u6b64\u5176\u4f4d\u7f6e\u662f\u56fa\u5b9a\u7684\u3002
6\uff0c\u6b64\u65f6\uff0c\u9875\u9762\u5f00\u59cb\u8fd0\u884c\uff0c\u9875\u9762\u5411\u4e0a\u6eda\u52a8\uff0c\u5e76\u4e14\u5bfc\u822a\u59cb\u7ec8\u5728\u9876\u90e8\u3002
\u7f6e\u9876\u7684\u4f18\u70b91.\u51cf\u5c11\u8df3\u51fa\u7387\uff1a\u5982\u679c\u662f\u4ece\u641c\u5bfb\u5f15\u64ce\u800c\u6765\u7684\u8bbf\u5ba2\uff0c\u5bf9\u6211\u4eec\u7f51\u7ad9\u4e0d\u719f\uff0c\u6587\u7ae0\u8bfb\u5b8c\u3001\u8d44\u6599\u627e\u5230\u540e\uff0c\u6ca1\u6709\u4e2a\u5438\u5f15\u6ce8\u610f\u529b\u7684\u8bbe\u8ba1\uff0c\u901a\u5e38\u5c31\u76f4\u63a5\u79bb\u5f00\u4e86\u3002\u90a3\u4e48\u5982\u679c\u6d6e\u52a8\u5bfc\u89c8\u5217\u6070\u5de7\u6709\u4e2a\u8bbf\u5ba2\u6709\u5174\u8da3\u7684\u4e3b\u9898\uff0c\u5c31\u6709\u673a\u4f1a\u7559\u4f4f\u8fd9\u4f4d\u5ba2\u4eba\u4e86\u3002
2.\u968f\u65f6\u63d0\u4f9b\u5bfc\u822a\uff1a\u4e0d\u662f\u6bcf\u4e2a\u4e0a\u7f51\u7684\u4eba\u90fd\u5f88\u719f\u6089\u7f51\u7ad9\u7684\u6784\u9020\u3001\u6446\u8bbe\u4f4d\u7f6e\u7b49\uff0c\u90a3\u4e48\u8fd9\u4e2a\u6d6e\u52a8\u5bfc\u89c8\u5217\u53ea\u8981\u9879\u76ee\u8bbe\u8ba1\u5f97\u597d\uff0c\u5c31\u80fd\u8ba9\u8fd9\u4f4d\u8ff7\u9014\u7f94\u7f8a\u7684\u7f51\u8def\u751f\u624b\u6709\u4e00\u4e2a\u5f88\u597d\u7684\u91cd\u70b9\u6307\u5f15\u3002
3.\u8282\u7701\u64cd\u4f5c\uff1a\u5bfc\u89c8\u5217\u7f6e\u9876\u53ef\u4ee5\u7701\u53bb\u6309\u300c\u56de\u5230\u9876\u7aef\u300d\u8fd9\u4e2a\u6309\u94ae\uff0c\u7f51\u9875\u53ef\u4ee5\u5c11\u5b89\u88c5\u3001\u6267\u884c\u4e00\u4e2a\u533a\u5757\uff0c\u800c\u4e14\u300c\u56de\u5230\u9876\u7aef\u300d\u6309\u94ae\u6709\u65f6\u4f1a\u906e\u4f4f\u4e00\u4e9b\u6587\u5b57\u3002
\u5b9e\u73b0\u65b9\u6cd5\u5bfc\u822a\u680f\u4e0b\u62c9\u81f3\u4e00\u5b9a\u9ad8\u5ea6\u540e\u56fa\u5b9a\u5728\u9876\u90e8\u7684\u7279\u6548\u3002\u5b9e\u73b0\u7684\u65b9\u6cd5\u6709\u597d\u591a\u79cd\uff0c\u8fd9\u91cc\u4ecb\u7ecd\u4e2a\u6700\u7b80\u5355\u6613\u61c2\u7684\u65b9\u6cd5\u3002\u901a\u8fc7jQuery\u6dfb\u52a0\u79fb\u9664\u7c7b\u6765\u5b9e\u73b0
\u6ce8\u610f\uff1adispaly:fixed\uff1b\u4f1a\u4f7f\u5143\u7d20\u8131\u79bb\u6587\u6863\uff0c\u4e0d\u5360\u636e\u6587\u6863\u7a7a\u95f4\u3002\u6240\u4ee5\u9875\u9762\u4f1a\u6709\u4e00\u4e9b\u8df3\u52a8\uff0c\u8fd9\u65f6\u53ef\u4ee5\u7ed9\u76f8\u90bb\u5143\u7d20\u52a0\u4e0anav\u6240\u5360\u9ad8\u5ea6\u7684margin-top\u6216padding-top\u5373\u53ef
\uff081\uff09\u201c\u5bfc\u822a\u680f\u4e0b\u62c9\u81f3\u4e00\u5b9a\u9ad8\u5ea6\u540e\u56fa\u5b9a\u5728\u9876\u90e8\u7684\u7279\u6548\u201d\uff0c\u4e5f\u6709\u540c\u5b66\u559c\u6b22\u53eb\u8ddf\u968f\u5bfc\u822a\u4ec0\u4e48\u7684\u3002\u53cd\u6b63\u5c31\u662f\u8fd9\u4e2a\u4e48\u610f\u601d\u3002\u5148\u76f4\u63a5\u4e0a\u4ee3\u7801\uff1a
\u5c06\u8fd9\u4e2ajs\u653e\u5230\u8981\u5b9e\u73b0\u6548\u679c\u7684\u9875\u9762\u91cc\u9762\u53bb\uff0c\u7136\u540e\u6211\u4eec\u8981\u4fee\u6539\u7684\u662f\u7b2c\u4e09\u884c\u7684.nav\uff0c\u201cnav\u201c\u6539\u6210\u4f60\u81ea\u5df1\u9875\u9762\u5bfc\u822a\u680f\u7684class\uff1b\u7b2c\u4e03\u884c\u7684\u201d100\u201c\u4e3a\u4e0b\u62c9\u5230100\u4e2a\u50cf\u7d20\u7684\u65f6\u5019\u89e6\u53d1\u7279\u6548\uff0c\u53ef\u4ee5\u81ea\u884c\u4fee\u6539\u81f3\u5408\u9002\u7684\u9ad8\u5ea6\u3002
\uff082\uff09\u7136\u540e\u5728css\u6587\u4ef6\u91cc\u9762\u589e\u52a0\u8fd9\u4e2a\u5c5e\u6027\uff1a
\u8fd9\u6837\u5c31\u5dee\u4e0d\u591a\u5b8c\u6210\u4e86\u3002
\u8bb2\u4e0b\u8fd9\u4e2ajs\u7684\u610f\u601d\uff0c\u5224\u65ad\u4e0b\u62c9\u5230\u4e00\u5b9a\u9ad8\u5ea6\u7684\u65f6\u5019\uff0c\u7ed9\u5bfc\u822a\u680f\u7684div\u63d2\u5165\u4e00\u4e2a\u201dfixednav\u201c\u5c5e\u6027\uff0c\u7136\u540e\u7ed9\u201dfixednav\u201c\u52a0\u4e0a\u56fa\u5b9a\u5728\u9876\u90e8\u7684\u53c2\u6570\u3002
css这样：.blank{ clear:both; overflow:hidden; display:block; overflow:hidden;}
您好！您可以尝试用padding-top试试。
希望对您有帮助！
绛旓細鍏充簬瀵艰埅鏍鐗规晥浠ｇ爜css锛瀵艰埅鏉ss浠ｇ爜杩欎釜寰堝浜鸿繕涓嶇煡閬擄紝浠婂ぉ鏉ヤ负澶у瑙ｇ瓟浠ヤ笂鐨勯棶棰橈紝鐜板湪璁╂垜浠竴璧锋潵鐪嬬湅鍚э紒1銆佸幓鎺夊叏閮ㄨ竟妗嗭細.all-cats .link{border:0px;}.menu-list .menu{border:0px}鍘绘帀绠ご锛.all-cats .link .popup-icon{display:none;}绠ご鏄釜鍥炬爣涓嶆槸棰滆壊銆2銆佷綘鍙互鐢ㄤ互涓嬩唬鐮...
绛旓細鏃犲簭鍒楄〃鏄痟tml椤甸潰鎺掔増缁忓父鐢ㄥ埌鐨勯潪甯稿疄鐢ㄧ殑鏍囩锛屼絾鏄柊鎵嬪湪浣跨敤鏃犲簭鍒楄〃鏃讹紝缁忓父浼氬湪妯悜鎺掔増涓婂嚭鐜伴棶棰橈紝绗旇呭湪杩欓噷鎻愪緵浜嗙瑪鑰呭湪浣跨敤鏃犲簭鍒楄〃鍒朵綔缃戦〉瀵艰埅鏍鏃剁殑鍑犵鏂规硶涓庡父瑙侀棶棰樼殑瑙ｅ喅闂銆傦紙浠css鍐呴儴鏍峰紡涓轰緥锛塠娉細鏈夊悓瀛︿箣鍓嶉棶杩囨垜鎬庝箞鍒朵綔涓寮犵綉椤碉紝浣嗗彧浼歨tml锛屾湰鏂囩敤鍒板潎涓篶ss銆傛晠璇存槑锛...
绛旓細鍦 position:relative;鍚庡姞涓妟-index:19999;鍊艰秺澶т唬琛ㄥ眰鏁拌秺楂橈紝杩欐牱灏变笉浼氳閬尅浜.
绛旓細鍏朵腑background:#000; filter:alpha(opacity:30); opacity:0.3;涓哄叧閿唬鐮侊紝褰搊pacity鍊间负1鏃讹紝琛ㄧず瀹屽叏涓嶉忔槑锛屼负0鏃惰〃绀哄畬鍏ㄩ忔槑銆傚叾鍏崇殑灞炴т粙缁嶅涓:opacity: 0.3锛涜繖鏄滄渶閲嶈鐨勨濓紝鍥犱负瀹冩槸鍦CSS鐨勭幇琛屾爣鍑嗐傝繖灏嗗湪Firefox锛孲afari鍜孫pera鐨勫ぇ澶氭暟鐗堟湰鐨勫伐浣溿傝繖灏嗘槸浣犳墍闇瑕佺殑涓鍒囧鏋滄墍鏈...
绛旓細menu鍜宮enu1涓嶈浣跨敤琛屽唴鍧梔isplay:inline-block;鐩存帴缁欏乏娴姩float:left;灏娌鏈夎繖涓棿璺濅簡锛屼絾鏄鏃惰璁颁綇缁欑粰nav_menu娓呴櫎娴姩銆傛竻闄ゆ诞鍔ㄥ缓璁笉鐩存帴浣跨敤overflow:hidden;鍙互灏嗕互涓嬪鍒跺湪css鏂囦欢鍐 .clearfix:after{ content:""; display:block; visibility:hidden; height:0; clear:both;} .clearfix...
绛旓細缁欎綘鐨勫鍣#containner璁剧疆涓涓搴︼紝鐒跺悗浣跨敤璇彞margin:0 auto;鍏跺疄灏卞彲浠ヤ簡銆備絾鍙兘IE6涓嶆敮鎸佽嚜鍔ㄧ┖鐧借竟銆備綘鐨刡ody閲岀殑text-align:center;鍘熸剰鏄鏂囨湰灞呬腑锛屼絾IE灏唗ext-align:center;鐞嗚В鎴愯鎵鏈夌殑涓滆タ閮藉眳涓紝鍖呮嫭div鏍囩锛涜繖鏄師鐞嗭紝涓嬮潰鎴戝湪浣犱唬鐮佺殑鍩虹涓婁慨鏀瑰涓嬶紙娴嬭瘯鍙敤锛夛細<!DOCTYPE html...
绛旓細杩欎綅缃戝弸浣犲ソ锛屽睘鎬osition:fixed;鏄浉瀵筨ody鍏冪礌璁剧疆鐨勶紝濡傛灉浣犳槸鎯璁╁鑸爮鍥哄畾鍦椤堕儴鐨勮瘽鍙互鐢ㄨ繖涓睘鎬с傚鑸爮鐨勫搴﹁缃负100%銆傚叿浣撹缃柟娉曞涓嬶細.header{ position:fixed; left0; top:0; width:100%;}
绛旓細鏂规硶 缁欏簳閮瀵艰埅鏍涓涓睘鎬ostion:fixed;left:0;bottom:0;z-index:1000;
绛旓細缁欏簳閮瀵艰埅鏍涓涓睘鎬ostion:fixed;left:0;bottom:0;z-index:1000;
绛旓細style="position:fixed 杩欎竴鍙ユ牱寮忓姞鍦ㄤ綘鐨瀵艰埅鐨勫鍣ㄤ笂闈㈠氨鍙互浜
