Question

当我在固定背景上滚动固定文本时，它不会在body或p标签下面，而是在顶部滚动。如何使固定文本与p元素一起进入身体下方，设置z-index使其起作用的诀窍是什么？ Codepen：https://codepen.io/zepzia/pen/MBmaoj

.parallax-bg {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #fff;
  height: 90vh;
  min-height: 420px;
  width: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.parallax-text {
  position: fixed;
  font-size: 28px;
  font-style: italic;
  color: #13284a;
  display: block;
  background: rgba(255, 255, 255, 0.7);
  padding: 15px 20px;
  margin-left: 45px;
}

<section>
  <div class="parallax-bg" style="background-image: url('https://unsplash.it/1200/700')">
    <div class="parallax parallax-text">"Lorem Ipsum Lorem Ipsum"</div>
  </div>
</section>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 1

只需将所有p标签包装在div中，并使用下面的css为其赋予z-index属性

.pwrap {position: relative; z-index: 100; background: #ffffff;}

Codelink

Answer 2

您的

标签没有任何位置，而且它们没有任何背景色，为了避免在

标记之间出现文本，最好添加一些包装器，并且在这种情况下不必添加z-index 请尝试：

shinyServer ( 
  function(input, output) {
    output$state_province_select <- renderUI({
      selectchoices <- c("Prince Edward Island","Ontario",
                         "Prince Edward Island1","Ontario1",
                         "Prince Edward Island2","Ontario2",
                         "Prince Edward Island3","Ontario3",
                         "Prince Edward Island4","Ontario4",
                         "Prince Edward Island5","Ontario5",
                         "Prince Edward Island6","Ontario6",
                         "Prince Edward Island7","Ontario7",
                         "Prince Edward Island8","Ontario8")
          selectlabel <- "Province"
          choiceselected <- "Prince Edward Island"
          selectInput("state_province_select",paste("Select ",selectlabel,":"),
                      choices = selectchoices, selected = choiceselected)
        })
      }
    )

http://jsfiddle.net/w9h1p6qx/1/

隐藏位置：固定在背景上的文字，背景固定：固定，位置：相对；文字下方滚动

2 个答案: