一个position:fixed属性的div中的另一个div居中失效 一个positionfixed属性的div中的另一个div居...

html\u5148\u8bbe\u7f6e\u4e00\u4e2adiv\u7684position\u5c5e\u6027\u4e3afixed; \u7136\u540e\u518d\u52a0\u5165margin:0 auto;\u7ed3\u679cdiv\u4e0d\u5c45\u4e2d\uff0c\u53bb\u6389position\u5c31\u53ef\u4ee5.

position\u4e3arelative\u624d\u80fd\u5c45\u4e2d\u3002\u9ed8\u8ba4\u7684\u5c31\u662frelative\uff0c\u6240\u4ee5\u53bb\u6389\u4e86\u5f53\u7136\u53ef\u4ee5\u5c45\u4e2d\u4e86\u3002
\u8bbe\u7f6e\u4e3afixed\u4ee5\u540e\uff0c\u53ea\u80fd\u8bbe\u7f6eleft\uff0ctop\uff0cright\uff0cbottom\u5c5e\u6027\u6765\u5b9a\u4f4d\u3002

\u4f60\u60f3\u5b9e\u73b0\u7684\u6548\u679c\u5e94\u8be5\u662f\u5bfc\u822a\u680f\u56fa\u5b9a\u5728\u9876\u90e8\u4f4d\u7f6e\uff0c\u4e0d\u968f\u7740\u5bfc\u822a\u6761\u7684\u6eda\u52a8\u800c\u6eda\u52a8\u5427\u3002

*{margin:0; padding:0}
#div1{width:980px; height:1200px; background:#006; margin:0 auto;}
#nav{position:fixed; background-color:#F00; height:50px; width:980px;}





\u6211\u8fd9\u6837\u7684\u7b80\u5355\u8bbe\u8ba1\u80fd\u591f\u628a\u5bfc\u822a\u6761\u56fa\u5b9a\u5728\u9876\u90e8\uff0c\u4e0d\u77e5\u4f60\u662f\u5426\u9700\u8981\u8fd9\u6837\u7684\u6548\u679c\u5462

<div style="position:fixed; text-align:center; background:#0CF; width:100%; height:30px;">
 <div style="display:inline-block; background:#999; width:100px; height:30px;">qw</div>
</div>
<div style="height:10000px; width:100%;"></div>

这就搞定了。



可以的,里面内容层要设置宽高css用margin:0 auto;就可以了

你想实现的效果应该是导航栏固定在顶部位置,不随着导航条的滚动而滚动吧。
<style type="text/css">
*{margin:0; padding:0}
#div1{width:980px; height:1200px; background:#006; margin:0 auto;}
#nav{position:fixed; background-color:#F00; height:50px; width:980px;}
</style>
<div id="div1">
<div id="nav"></div>
<div id="main"></div>
</div>
我这样的简单设计能够把导航条固定在顶部,不知你是否需要这样的效果呢

源代码,居中不一定要用margin:0 auto;的,有时候可以用text-align:center

  • JS鍥剧墖鏀惧ぇ鎵╁睍,鎸夐挳寮鍏虫斁澶ч暅
    绛旓細鍥炵瓟锛歝opy杩愯鎴戝涓嬩唬鐮: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>magnifier</title> <script src=" http://code....
  • 娉曡瘧涓楂樻墜甯繖缈昏瘧涓涓嬪叧浜庨噾灞炶蒋绠℃祴璇曠殑璇曢獙鏂规硶鎬!
    绛旓細杩炴帴杞绔ご鐨勯儴浠跺簲璇ユ寜鐓у浘9鎵绀哄畨瑁呫傛墍鏈夌殑涓茶繛鎶撴墜搴旇鐢辩敓浜у晢鎻愪緵銆備笂閮ㄧ殑濂楁帴绠″拰涓涓瑁呯疆杩炴帴锛岃繖涓缃娇鍨傜洿鏂瑰悜杞鐨勪笂鍗婇儴鍒嗗彈鍔涘ぇ閿鎵浜х敓鐨勫姏F锛屾寜鍏枻锛屼緥濡傦細
  • feu鏄粈涔堟剰鎬 銆婃硶璇姪鎵嬨嬫硶姹
    绛旓細le feu s'est 茅teint鐏唲鐏簡 茅teindre le feu avec un extincteur鐢涓涓鐏伀鍣ㄧ伃鐏 le feu gagne rapidement澶х伀杩呴熻敁寤 il y a eu trois coups de feu successifs鏈夎繃杩炵画涓夊0鏋搷 faire une veill茅e autour du feu缁勭粐涓涓瘽鐏櫄浼 le bus stoppe au feu rouge鍏叡姹借溅鍦ㄧ孩鐏墠鍋滀笅 il a...
  • 瀛ゅ矝鍗辨満闂
    绛旓細杩涘叆娓告垙 鎸 ~ 閿 鎵撳紑鍛戒护鎺у埗鍙板湪杈撳叆涓嬮潰涓嬪懡浠:i_unlimitedammo = 1 鏃犻檺寮硅嵂ai_IgnorePlayer = 1 鏁屼汉鐪嬩笉瑙佷綘i_noweaponlimit = 1 (鍙惡甯?)姝﹀櫒鏁伴噺涓嶉檺娉ㄦ剰:鍦ㄤ慨鏀瑰墠涓瀹氳鍋氬ソ婧愭枃浠剁殑澶囦唤銆備笅闈㈡槸鎵鏈夊懡浠(杩欎簺鍛戒护浠涔堟剰鎬濇垜涔熶笉鐭ラ亾缁欎綘鍙傝冧笅):aa_maxDistac_animErrorClampac_animErrorMaxAngle...
  • 扩展阅读:position fixed ... photoshop免费网站 ... professional position ... be positioned to ... position和title的区别 ... paperpass免费入口 ... situation和position ... opposition 中文翻译 ... positions是什么意思 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网