收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1673|回复: 4

求解position的定位和高度问题

[复制链接]
发表于 2011-12-26 23:29:13 | 显示全部楼层 |阅读模式
自学初级者求教POSITION定位问题。
语言表达能力差,直接上图
1:IE7设定高度
IE7设定高度.jpg

2:IE7不设定高度
IE7不设定高度.jpg

3:chrome设定高度
chrome设定高度.jpg

4:chrome不设定高度
chrome不设定高度.jpg

理想中的效果应该是图3那样。
百度了很多资料也求解无果,特此发图请高人们指导
演示网址

补充内容 (2011-12-26 23:41):
width: 960px; 也加了。。。还是有问题
发表于 2011-12-27 07:47:54 | 显示全部楼层
本帖最后由 yaohaixiao 于 2011-12-27 07:49 编辑

我看过你的DEMO页面了,我写了一个DEMO

演示:

 提示:您可以先修改部分代码再运行



代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>Dialog</title>
  6. <style type="text/css">
  7. *{margin:0;padding:0;}
  8. body{font-size:12px;text-align:center;}
  9. ul,li{list-style-type:none;}

  10. #header{position:relative;z-index:1;margin:0 auto;width:960px;overflow:hidden;}

  11. #logo{float:left;margin-top:10px;background-image:url(http://www.138mv.com/template/default/images/logo.gif);text-indent:-999px;}
  12. #logo,#logo a{display:block;width:230px;height:70px;overflow:hidden;}

  13. .navigation{position:absolute;z-index:3;top:0;left:190px;width:770px;background-color:#499BF0;overflow:hidden;}
  14. .navigation li{float:left;height:24px;line-height:24px;padding:0 5px;}       
  15. .navigation a{color:#FFF;}

  16. #search-box{float:right;margin-top:24px;width:710px;overflow:hidden;}
  17. #frmsearch{overflow:hidden;}
  18. .search-other{float:left;padding:3px 0;width:410px;overflow:hidden;}
  19. .search-pannel{float:right;width:300px;padding:3px 0;text-align:right;overflow:hidden;}
  20. #keyword{padding:3px;border:1px solid #CCC;width:217px;height:22px;margin-right:5px;}
  21. #btn-search{border:none;width:60px;height:30px;cursor:pointer;background:#499BF0;color:#FFF;}

  22. .hotag{height:30px;line-height:30px;}
  23. .hotag strong{float:right;font-weight:bold;}
  24. .hotag a{padding:0 4px;color:#999;}
  25. </style>
  26. </head>
  27. <body>
  28. <div id="header">
  29.          <h1 id="logo"><a href="http://www.138mv.com/" title="移动影院">移动影院</a></h1>
  30.          <ul class="navigation">
  31.                 <li class="active"><a title="移动影院 I Like It!" href="http://www.138mv.com">移动影院</a></li>
  32.                 <li><a target="_self" title="动作片" href="/list/1.html">动作</a></li>
  33.                 <li><a target="_self" title="喜剧片" href="/list/2.html">喜剧</a></li>
  34.                 <li><a target="_self" title="爱情片" href="/list/3.html">爱情</a></li>
  35.                 <li><a target="_self" title="科幻片" href="/list/4.html">科幻</a></li>
  36.                 <li><a target="_self" title="恐怖片" href="/list/5.html">恐怖</a></li>
  37.                 <li><a target="_self" title="战争片" href="/list/6.html">战争</a></li>
  38.                 <li><a target="_self" title="剧情片" href="/list/7.html">剧情</a></li>
  39.                 <li><a target="_self" title="经典片" href="/list/17.html">经典</a></li>
  40.                 <li><a target="_self" title="大陆剧" href="/list/10.html">大陆剧</a></li>
  41.                 <li><a target="_self" title="港台剧" href="/list/11.html">港台剧</a></li>
  42.                 <li><a target="_self" title="日韩剧" href="/list/12.html">日韩剧</a></li>
  43.                 <li><a target="_self" title="欧美剧" href="/list/13.html">欧美剧</a></li>
  44.                 <li><a target="_self" title="动画片" href="/list/8.html">动画</a> </li>
  45.                 <li><a target="_self" title="综艺片" href="/list/18.html">综艺</a> </li>
  46.                 <li class="active"><a target="_blank" title="天翼高清电视直播" href="/tv.html">电视直播</a> </li>
  47.                 <li class="active"><a target="_blank" title="最近更新的电影" href="/top/new.html">最新电影</a> </li>
  48.                 <li class="active"><a target="_blank" title="最近更新的电视剧" href="/top/tv.html">最新电视剧</a> </li>
  49.          </ul>
  50.          <div id="search-box">
  51.                    <form name="frmsearch" action="" method="post" id="frmsearch">
  52.                                <div class="search-other"></div>
  53.                                <div class="search-pannel">
  54.                                     <input type="text" vlaue="" name="keyword" id="keyword" />
  55.                                      <button type="submit" id="btn-search" name="btn-search">搜索</button>
  56.                                 </div>
  57.                    </form>
  58.                    <p class="hotag"><strong>:热门搜索</strong><a href="/search.asp?searchword=%C7%E0%B4%BA%C6%DA2%3A%C7%E0%B4%BA%CA%A7%C0%D6%D4%B0">青春期2:青春失乐园</a><a href="/search.asp?searchword=%CA%A7%C1%B533%CC%EC">失恋33天</a><a href="/search.asp?searchword=%CF%B2%B0%AE%D2%B9%C6%D1">喜爱夜蒲</a><a href="/search.asp?searchword=%D0%C9%C7%F2%E1%C8%C6%F0">猩球崛起</a><a href="/search.asp?searchword=%C4%D0%C8%CB%B0%EF">男人帮</a><a href="/search.asp?searchword=%C7%A7%C9%BD%C4%BA%D1%A9">千山暮雪</a><a href="/search.asp?searchword=%CE%E4%D4%F2%CC%EC%C3%D8%CA%B7">武则天秘史</a><a href="/search.asp?searchword=%B0%AE%C7%E9%CB%AF%D0%D1%C1%CB">爱情睡醒了</a></p>
  59.          </div>
  60. </div>       
  61. </body>
  62. </html>
复制代码
你页面的结构可以再简单一点。关键是你要清楚怎么使用position属性。然后就是要设置好z-index值。这里只需要用navigation盖住LOGO就可以了。也就是给navigation设置position:absolute;z-index:3;当然这里设置z-index:2也是可以的。

我这里主要想说的是,设置了position:relative/absolute,一定要设置z-index值。然后就是你最后提到的宽度的问题,根据W3C的推荐,设置了float或者position属性的元素,最好是设置一个width:。
回复 支持 反对

使用道具 举报

发表于 2011-12-27 08:28:51 | 显示全部楼层
看这篇文章,你就懂了
CSS相对定位与绝对定位
回复 支持 反对

使用道具 举报

发表于 2011-12-27 16:52:31 | 显示全部楼层
由外而内
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-12-27 23:56:49 | 显示全部楼层
感谢祖国感谢党 感谢楼上所有帮忙的好心人 我捣鼓捣鼓去  先谢谢了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-12-4 16:15 , Processed in 0.109101 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表