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

问题描述

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

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

我做了一个非常小的例子来说明我想要做的事情:https://jsfiddle.net/zu2epxxxq/1/

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

HTML:

<div><p>这是一个测试</p>

</节><section id="第二个"><div><p>本节中必须推送的更多文本</p>

</节>

CSS:

html,身体 {高度:100%；颜色:#fff;字体大小:16px；边距:0；填充:0；}部分 {最小高度:100%；}#第一的 {背景色:#000；}#第二 {背景颜色:#ddd;}部分 >div {底部:0；边距:0；字体大小:4em；位置:绝对；变换:翻译(-50%，50%)；左:50%；}

解决方案

使用position:relative;"在这些部分.然后，您可以相对于部分元素定位子元素.

我做了这个:https://jsfiddle.net/hpepwvdg/1/

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

html, body, .container {高度:100%；颜色:#fff;}.容器 {显示:-webkit-flexbox；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；-webkit-flex-align:居中；-ms-flex-align:居中；-webkit-align-items:居中；对齐项目:居中；对齐内容:居中；}#第一的 {背景色:#000；}#第二 {背景颜色:#ddd;}.center_heading {字体大小:4em；}

<h1 class="center_heading">居中！</h1></节>
<h1 class="center_heading">居中！</h1></section>

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屋！