CSS-如果没有绝对定位和Z-index,他们怎么做?

时间:2011-02-28 02:53:38

标签: css html

我是新手,但并不是全新的CSS和编码。在过去的6个月左右的时间里,我的编码速度很快。几个星期前,我遇到了一个非常酷的布局网站。特别是TigerHawk标志坐在(或至少看起来)几个非AP Divs上,我似乎无法弄清楚他们是如何做到的。我很确定他们不是AP Div,因为当我扩展页面时div会改变位置等等。

有人可以告诉我如何在不使用AP div的情况下完成它吗?我很确定我可以使用AP div并调整Z-index来复制它,以便徽标悬停在我需要它的div的顶部,但是这样的布局对于我想做的事情来说太僵硬了。 / p>

以下是hawkeyesports.com网站的链接,其中TigerHawk徽标位于其他div上。 Check out hawkeyesports.com for some really cool CSS I am trying to figure out.

非常感谢任何帮助!

2 个答案:

答案 0 :(得分:1)

#mast-logo绝对定位。

#mast-logo {
  background: url("http://grfx.cstv.com/schools/iowa/graphics/iowa-10-logo.png") no-repeat scroll 0 0 transparent;
  height: 133px;
  left: -13px;
  position: absolute;
  top: -4px;
  width: 198px;
  z-index: 200;
}

It is not really difficult to do,一旦您掌握absoluterelative定位。

答案 1 :(得分:0)

根据firebug,菜单旁边的徽标有这个CSS:

#mast-logo {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://grfx.cstv.com/schools/iowa/graphics/iowa-10-logo.png) no-repeat scroll 0 0;
height:133px;
left:-13px;
position:absolute;
top:-4px;
width:198px;
z-index:200;
}