在部分内创建视差页面和定位元素 [英] Creating a parallax page and positioning elements within the sections

问题描述

我目前正在构建一个视差页面，但是我在定位这些部分上的元素时遇到了问题。因此我的问题是绝对定位。

有没有办法让绝对位置只在一个部分内工作，而不是整个页面/视口？

我做了一个我正在尝试做的最简单的例子： https://jsfiddle.net/ zu2epxxq / 1 /

正如您可以看到 #second 部分中的段落位于该部分而不是主要部分 #first 。显然这是使用绝对定位的副作用。
如何以干净和良好的方式解决这个问题？

HTML：

 < section id =first> 
< div> 
< p>这是一项测试< / p> 
< / div> 
< / section> 
< section id =second> 
< div> 
< p>在此部分必须推送更多文本< / p> 
< / div> 
< / section> 
  

CSS：

  html，
 body {
 height：100％; 
颜色：#fff; 
 font-size：16px; 
保证金：0; 
 padding：0; 
} 
 
部分{
最小高度：100％; 
} 
 
 #first {
 background-color：＃000; 
} 
 
 #second {
 background-color：#ddd; 
} 
 
部分> div {
 bottom：0; 
保证金：0; 
 font-size：4em; 
位置：绝对; 
转换：翻译（-50％，50％）; 
剩下：50％; 
 
  

解决方案

在部分。然后您可以将子元素相对于节元素进行定位。

我是这样做的：
https://jsfiddle.net/hpepwvdg/1/

但我更喜欢使用flexbox布局模式，因为我发现了flexbox的强大功能：（ http://www.w3schools.com/css/css3_flexbox.asp ）：

  html，body，.container {height：100％; color：#fff;}。container {display：-webkit-flexbox;显示：-ms-flexbox;显示：-webkit-flex;显示：flex; -webkit-flex-align：center; -ms-flex-align：center; -webkit-align-items：center; align-items：center; justify-content：center;}＃first {background-color：＃000;}＃second {background-color：#ddd;}。centered_heading {font-size：4em;}  

< section class =containerid =first> < h1 class =centered_heading>居中！< / h1>< / section>< section class =containerid =second> < h1 class =centered_heading>居中！< / h1>< / section>

$ b

I am currently building a parallax page, but I have problems positioning the elements on the sections. Hence my problem is absolute positioning.

Is there any way to make the absolute position to work within a section only instead of the entire page/viewport?

I have made a very minimal example of what I am trying to do: https://jsfiddle.net/zu2epxxq/1/

As you can see the paragraph within #second section should position inside of that section and not the main section #first. Obviously this is a side-effect of using absolute positioning. How do I solve this in a clean and good manner?

HTML:

<section id="first">
  <div>
    <p>This is a test</p>
  </div>
</section>
<section id="second">
  <div>
    <p>More text that has to be pushed arund in this section</p>
  </div>
</section>

CSS:

html,
body {
  height: 100%;
  color: #fff;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

section {
  min-height: 100%;
}

#first {
  background-color: #000;
}

#second {
  background-color: #ddd;
}

section > div {
  bottom: 0;
  margin: 0;
  font-size: 4em;
  position: absolute;
  transform: translate(-50%, 50%);
  left: 50%;
}

解决方案

Use "position: relative;" on the sections. You then can position the child elements relative to the section elements.

I made this out of it: https://jsfiddle.net/hpepwvdg/1/

But I prefer using the flexbox layout mode since I discovered the power of flexbox: (http://www.w3schools.com/css/css3_flexbox.asp):

html, body, .container {
    height: 100%;
      color: #fff;
}
.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

#first {
    background-color: #000;
}

#second {
    background-color: #ddd;
}

.centered_heading {
    font-size: 4em;
}

<section class="container" id="first">
  <h1 class="centered_heading">Centered!</h1>
</section>

<section class="container" id="second">
  <h1 class="centered_heading">Centered!</h1>
</section>

这篇关于在部分内创建视差页面和定位元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！