Heim >Web-Frontend >HTML-Tutorial >层与层之间的位置_html/css_WEB-ITnose
层与层之间的位置_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:33:491172Durchsuche
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Untitled Page</title> <style type="text/css"> body { font-family: 宋体, Arial; color: #000; background-color: #ffffff; } * { margin: 0; padding: 0; font-size: 12px; } .wrap { width: 298px; border: solid 1px #ccc; margin: 50px 0 0 30px; } .wrap .content { margin: 6px; } .wrap .row { height: 30px; padding-left: 20px; cursor: pointer; } .wrap a { line-height: 30px; } .wrap a.out-title { color: #313131; text-decoration: none; } .wrap a.out-title:hover { color: #f00; text-decoration: underline; font-weight: bold; } .wrap .active-row { height: 28px; line-height: 28px; border: solid 1px #eee; border-right: none; } .wrap .active-row a { font-weight: bold; } .wrap .inside-wrap { z-index: 100; background-color: #fff; height: 100px; width:204px; border: solid 1px #eee; display: none; position: absolute; left: 200px; margin-top: -31px; } .wrap .active-row .inside-wrap { display: block; } </style></head><body> <div class="wrap"> <div class="content"> <div class="row" onmouseover="this.className='row active-row'" onmouseout="this.className='row'"> <a href="javascript:void(0);" class="out-title">笔记本电脑</a> <div class="inside-wrap"> 里面内容 </div> </div> <div class="row" onmouseover="this.className='row active-row'" onmouseout="this.className='row'"> <a href="javascript:void(0);" class="out-title">笔记本电脑</a> <div class="inside-wrap"> 里面内容 </div> </div> </div> </div></body></html> 我鼠标移上去的时候，class为inside-wrap这块内容的相对位置，在IE8,firefox下是正常的，在ie6,7下就不正常
y轴不在同一水平线，请问css怎么写才能解决呢，搞了半天，搞不出来，请大侠帮忙
附加：如果上面的问题解决了，如果在class为inside-wrap这块下面铺一层iframe怎么实现呢
回复讨论(解决方案)
.wrap .row {
height: 30px;
padding-left: 20px;
cursor: pointer;
position:relative;
}
.wrap .inside-wrap {
z-index: 100;
background-color: #fff;
height: 100px;
width:204px;
border: solid 1px #eee;
display:none;
position: absolute;
left: 200px; top:0;
}
这样就好了！
.wrap .row {
height: 30px;
padding-left: 20px;
cursor: pointer;
position:relative;
}
.wrap .inside-wrap {
z-index: 100;
background-color: #fff;
height: 100px;
width:204px;
border: soli……
+11
如果下面加个ifame的，可以再帮我实现下吗?
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：请教各位大侠，这个界面如何实现_html/css_WEB-ITnoseNächster Artikel：火狐与360的margin效果_html/css_WEB-ITnose