3

I have created this site and am trying to implement fixed text on the first slide (the one with the Nike basketball). Currently, I have the text 'The first of its kind' as part of the background image. Is it possible to separate it from the background and place the text in its own div?

I am stumped for ideas as the first slide is created by using three separate div - one for the top portion of the ball, the second for the bottom portion of the ball, and the third as the magnification of the ball. I thought of attaching the text within the first and second div, but it causes the text to scroll with the page as oppose to fixing it in place.

Site link: http://www.sfu.ca/~jca41/stuph/parallaxTest/parallax03/parallax03.html

4

1 回答 1

6

是的，使用position:fixedwithleft和topcss 属性。

例如

#fixedText {
  position:fixed;
  left:100px;
  top:50px;
}

编辑：

为了适应幻灯片的重叠，您必须将 az-index应用于幻灯片和文本。

例如，您可以将页面类的 z-index 设为 2（并且 position:relative 或 z-index 不生效），#fixedText 规则的 z-index 为 1，#first 规则的 z-index index 为 0。这将创建您所追求的分层：

  #fixedText {
    position: fixed;
    left: 75px;
    top: 120px;
    font-size: 35pt;
    color: white;
    z-index: 1;
    font-family: helvetica;
  }

  #first {
    background: url(images/01.jpg) no-repeat fixed;
    height: 1000px;
    z-index: 0;
  }

  .page {
    margin: 0;
    padding: 0;
    overflow: auto;
    width: 100%;
    z-index: 1;
    position: relative;
  }
于 2012-06-06T23:43:23.320 回答