CSS过渡，绝对定位和：target的问题

我正在尝试开发一个单屏幕的纯CSS网站界面，该界面允许用户单击一系列选择。目的是允许用户自行选择所需的操作方式（注册，联系表格，加载新页面等）。

我的方法是将几个绝对定位的div放在相对定位的包装器中，然后结合使用z-index和：target以获得所需的结果。

我遇到的问题是幻灯片之间的过渡（每个幻灯片显示用户可以做出的两个选择）。在第一个测试（A/B Slide Choice Test (Working)中，转换是通过从左向右滑动div来进行的。随后的两个幻灯片都绝对地定位在right：100％，然后right：0：：target

#target2:target {
        right: 0;
    }
    #target3:target {
        right: 0;
    }
    #target1, #target2, #target3 {
        transition: all 0.6s ease-out;
    }
    #target1 {
        z-index:1;
    }
    #target2 {
        z-index:2;
        right: 100%;
    }
    #target3 {
        z-index:3;
        right: 100%;
    }

结果按预期工作-单击选项1A或1B时，正在发生过渡并且显示正确的幻灯片。

但是在第二个测试A/B Slide Choice Test (not working)中，两个随后的div幻灯片2和3绝对定位到左：100％，然后使用：target左：: 0

#target2:target {
        left: 0;
    }
    #target3:target {
        left: 0;
    }
    #target1, #target2, #target3 {
        transition: all 0.6s ease-out;
    }
    #target1 {
        z-index:1;
    }
    #target2 {
        z-index:2;
        left: 100%;
    }
    #target3 {
        z-index:3;
        left: 100%;
    }

正在发生几件事：

点击第1A号决定：

[结果：幻灯片3（＃target3）移入位置而没有过渡。
期望：幻灯片2（＃target2）从屏幕的右侧滑动。

据我所知，单击1A激活了错误的目标，并且/或幻灯片2和3都向左移动（幻灯片2被完全推离屏幕向左移动）。然后，如果您单击选项3A，过渡将正常工作（向右滑动，再次显示幻灯片1）

点击第1B号决定：

[结果：幻灯片3（＃target3）突然出现，并随着过渡移到屏幕外（向左），显示幻灯片2（＃target2）。
期望：幻灯片3（＃target3）从屏幕的右侧滑动。

然后，如果您单击选项2B，则transion会正常工作（滑块会回到右侧，再次显示幻灯片1）

我已经尝试使用top：100％和top：0，以及bottom：100％和bottom：0来进行绝对定位的过渡

发生相同的问题：使用绝对定位的“顶部”值有效，而“底部”值会创建不良行为。

我希望能够在任何方向上使用转换，最终目标是'方向'将是Joomla模块中可配置的后端参数。该模块实际上已编写，安装和正常工作，但存在此过渡问题。

我不知道：target是否以某种方式破坏了预期的行为，或者我是否在使用绝对定位的CSS值时做错了事情，或者两者都没有。或者，如果我对Flexbox的（有限的）理解使事情变得混乱了。

如果需要的话，我完全愿意使用其他方法来获得工作版本中显示的所需行为（最好仅使用CSS）。

但是到目前为止，在我的互联网搜索中，我还没有找到我想要完成的任何代码段或一屏A / B界面的示例。

我非常感谢您的协助！

编辑：我一直在研究值，以查看是否可以更好地了解正在发生的事情。

        #target2:target {
        left: 100%;
    }
    #target3:target {
        left: 100%;
    }
    #target1, #target2, #target3 {
        transition: all 0.6s ease-out;
    }
    #target1 {
        z-index:1;
    }
    #target2 {
        z-index:2;
        left: 100%;
    }
    #target3 {
        z-index:3;
        left: 100%;
    }

理论上（据我所知），使用上述CSS，两个值都应保持不变：100％

但是实际上，单击决策1A或1B会使＃target2和＃target3在屏幕上移动（尽管没有过渡）。>>

然后，我在相对定位的包装div中添加了多张幻灯片，发现所有幻灯片ID均受到影响（＃target2，＃target3，＃target4，＃target5等。）>]

再次理解，单击href =“＃target2”仅会影响＃target2：target，但是会影响所有其他幻灯片ID，使我认为position：absolute和：target会在某种程度上发生冲突。

（（桌子上的刘海头）] >>

我正在尝试开发一个单屏幕的纯CSS网站界面，该界面允许用户单击一系列选择。目的是允许用户自行选择自己想要采取行动的方式（...

您遇到的问题的确是：绝对位置和定位存在冲突。它们冲突的方式是因为浏览器试图滚动到正确的位置，因为您正在使用定位标记。然后位置开始改变，这导致您要显示的元素消失。

因此，要使它真正发挥作用，您有两种选择，那就是防止浏览器滚动。例如放弃锚标记，以防止浏览器代替您滚动（也许是一堆JS？）。

或者，您可以全神贯注地滚动，而忽略绝对位置的位置变化。

仅CSS解决方案

由于您甚至要求替代方法（最好不使用JS），因此这里使用CSS滚动捕捉（CSS Tricks）来完成转换的繁重工作。您所有的标记都是相同的。

此解决方案的主要注意事项：

html元素在这种情况下是具有滚动条的元素，因此它需要滚动快照类型和行为

html {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
所有目标都必须是捕捉点：
#target1,
#target2,
#target3 {
  scroll-snap-align: center;
}
这是使它在基本级别上可以工作的主要两件事，但是还有一些其他有趣的补充，可以使它看起来更好一些。
我们需要在定位目标时将其增加到更大的z-index，以便它们始终位于最前面。
#target2:target,
#target3:target {
  z-index: 5;
}
目标1在没有目标的情况下需要固定在一个位置上，因此看起来像在滚动时一直停留在一个位置上（不幸的是，我无法提出一种很好的方法来完成反向操作）。
#target1:not(:target) {
  position: fixed;
  left: 0;
}
在这种情况下，必须特别在z索引上进行过渡，因此target2在移出屏幕时不会立即进入目标3的下方
 section:not(:target) {
  transition: z-index 2s ease-out;
}
 body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

html {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow: hidden;
}

.mainwrap {
  height: 100%;
  position: relative;
}

.flexwrap {
  position: relative;
  display: flex;
  height: 100%;
}

.contentwrap {
  display: flex;
  flex: 1;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0;
  margin: 0;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.leftbox,
.rightbox {
  padding: 5%;
}

.leftbox {
  color: #fff;
}

.rightbox {
  color: #574a46;
}

@media screen and (min-width: 993px) {
  .contentwrap {
    flex-direction: row;
  }
  figure {
    flex-direction: column;
  }
  .flexcolumn {
    justify-content: center;
  }
}

@media screen and (max-width: 992px) {
  .contentwrap {
    flex-direction: column;
  }
  figure {
    flex-direction: row;
  }
  .flexcolumn {
    justify-content: center;
  }
}

.drab {
  background-color: #676c27;
}

.orange {
  background-color: #ff9600;
}

.yellow {
  background-color: #ffcc00;
}

.burgundy {
  background-color: #83240f;
}

.lime {
  background-color: #cccc33;
}

.olive {
  background-color: #333300;
}

.navy {
  background-color: #000033;
}

a {
  color: #ffffff;
}

#target2:target,
#target3:target {
  z-index: 5;
}

#target1:not(:target) {
  position: fixed;
  left: 0;
}

 section:not(:target) {
  transition: z-index 2s ease-out;
}

#target1,
#target2,
#target3 {
  scroll-snap-align: center;
}

#target1 {
  z-index: 1;
}

#target2 {
  z-index: 2;
  left: 100%;
}

#target3 {
  z-index: 3;
  left: 100%;
}

.start {
  position: absolute;
  width: 100%;
  height: 100%;
}

.reset {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* left: 0%; */
  z-index: -1;
  /* transform: translateX(100%); */
}<div id="decisionTree" class="mainwrap">
  <section class="start" id="target1">
    <div class="flexwrap">
      <div class="contentwrap">
        <figure id="tree1" class="fadebox leftbox navy">
          <div class="flexcolumn">
            <h3>I am Decision #1a</h3>
            <figcaption>
              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.
            </figcaption>
          </div>
          <a href="#target2">CLICK</a>
        </figure>
        <figure id="tree2" class="fadebox rightbox yellow">
          <div class="flexcolumn">
            <h3>I am Decision #1b</h3>
            <figcaption>
              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.
            </figcaption>
          </div>
          <a href="#target3">CLICK</a>
        </figure>
      </div>
    </div>
  </section>
  <section class="reset" id="target2">
    <div class="flexwrap">
      <div class="contentwrap">
        <figure id="tree1" class="fadebox leftbox olive">
          <div class="flexcolumn">
            <h3>I am Decision #2a</h3>
            <figcaption>
              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.
            </figcaption>
          </div>
          <a href="#target1">CLICK</a>
        </figure>
        <figure id="tree2" class="fadebox rightbox orange">
          <div class="flexcolumn">
            <h3>I am Decision #2b</h3>
            <figcaption>
              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.
            </figcaption>
          </div>
          <a href="#target1">CLICK</a>
        </figure>
      </div>
    </div>
  </section>
  <section class="reset" id="target3">
    <div class="flexwrap">
      <div class="contentwrap">
        <figure id="tree1" class="fadebox leftbox burgundy">
          <div class="flexcolumn">
            <h3>I am Decision #3a</h3>
            <figcaption>
              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.
            </figcaption>
          </div>
          <a href="#target1">CLICK</a>
        </figure>
        <figure id="tree2" class="fadebox rightbox lime">
          <div class="flexcolumn">
            <h3>I am Decision #3b</h3>
            <figcaption>
              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.
            </figcaption>
          </div>
          <a href="#target1">CLICK</a>
        </figure>
      </div>
    </div>
  </section>
</div>
重要的是，您不会从最小化的结果中获得此效果，因为它似乎至少需要一定的高度才能工作。因此，您必须运行该代码段，然后单击全屏。
基于JavaScript的解决方案
如上所述，只要它解释得很好/足够简单，就可以使用JS解决方案：
在这种情况下，JS如下。对实际片段进行了注释，以使它们更易于遵循。通常，此解决方案通过在元素中切换:target类来代替使用.selected。这样做的主要好处是摆脱了锚标记提供的浏览器滚动事件。
function clickHandler(target){
  // Get the element that should be selected
  const elem = document.querySelector(target);
  // There were no elements to be selected
  if(!elem) return;
  // Get the old selected element (if any)
  const prevElem = document.querySelector('.selected');
  if(prevElem){
    // If there was a previously selected element, it isn't anymore
     prevElem.classList.remove('selected'); 
  }
  // Make the new element selected
  elem.classList.add('selected');
}
CSS的更改也是次要的：
不是使用:target，而是使用.selected
#target2.selected, #target3.selected {
    left: 0;
}

为了在堆栈溢出中显示，因为默认情况下它提供了如此短而深蹲的窗口，所以我将min-height设置为390px（因此，有一个基本大小并且没有一些怪异）
    html {
      min-height: 390px;
      overflow-x: hidden;
      overflow-y: auto;
    }
 function clickHandler(target) {
  // Get the element that should be selected
  const elem = document.querySelector(target);
  // There were no elements to be selected
  if (!elem) return;
  // Get the old selected element (if any)
  const prevElem = document.querySelector('.selected');
  if (prevElem) {
    // If there was a previously selected element, it isn't anymore
    prevElem.classList.remove('selected');
  }
  // Make the new element selected
  elem.classList.add('selected');
}html {
  min-height: 390px;
  overflow-x: hidden;
  overflow-y: auto;
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

.mainwrap {
  height: 100%;
  position: relative;
}

.flexwrap {
  position: relative;
  display: flex;
  height: 100%;
}

.contentwrap {
  display: flex;
  flex: 1;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0;
  margin: 0;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.leftbox,
.rightbox {
  padding: 5%;
}

.leftbox {
  color: #fff;
}

.rightbox {
  color: #574a46;
}

@media screen and (min-width: 993px) {
  .contentwrap {
    flex-direction: row;
  }
  figure {
    flex-direction: column;
  }
  .flexcolumn {
    justify-content: center;
  }
}

@media screen and (max-width: 992px) {
  .contentwrap {
    flex-direction: column;
  }
  figure {
    flex-direction: row;
  }
  .flexcolumn {
    justify-content: center;
  }
}

.drab {
  background-color: #676c27;
}

.orange {
  background-color: #ff9600;
}

.yellow {
  background-color: #ffcc00;
}

.burgundy {
  background-color: #83240f;
}

.lime {
  background-color: #cccc33;
}

.olive {
  background-color: #333300;
}

.navy {
  background-color: #000033;
}

a {
  color: #ffffff;
}

#target2.selected,
#target3.selected {
  left: 0;
}

#target1,
#target2,
#target3 {
  transition: all 0.6s ease-out;
}

#target1 {
  z-index: 1;
}

#target2 {
  z-index: 2;
  left: 100%;
}

#target3 {
  z-index: 3;
  left: 100%;
}

.start {
  position: absolute;
  width: 100%;
  height: 100%;
}

.reset {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
<div id="decisionTree" class="mainwrap">
  <section class="start" id="target1">
    <div class="flexwrap">
      <div class="contentwrap">
        <figure id="tree1" class="fadebox leftbox navy">
          <div class="flexcolumn">
            <h3>I am Decision #1a</h3>
            <figcaption>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.</figcaption>
          </div>
          <button onClick="clickHandler('#target2')">CLICK</button>
        </figure>
        <figure id="tree2" class="fadebox rightbox yellow">
          <div class="flexcolumn">
            <h3>I am Decision #1b</h3>
            <figcaption>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.</figcaption>
          </div>
          <button onClick="clickHandler('#target3')">CLICK</button>
        </figure>
      </div>
    </div>
  </section>
  <section class="reset" id="target2">
    <div class="flexwrap">
      <div class="contentwrap">
        <figure id="tree1" class="fadebox leftbox olive">
          <div class="flexcolumn">
            <h3>I am Decision #2a</h3>
            <figcaption>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.</figcaption>
          </div>
          <button onClick="clickHandler('#target1')">CLICK</button>
        </figure>
        <figure id="tree2" class="fadebox rightbox orange">
          <div class="flexcolumn">
            <h3>I am Decision #2b</h3>
            <figcaption>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.</figcaption>
          </div>
          <button onClick="clickHandler('#target1')">CLICK</button>
        </figure>
      </div>
    </div>
  </section>
  <section class="reset" id="target3">
    <div class="flexwrap">
      <div class="contentwrap">
        <figure id="tree1" class="fadebox leftbox burgundy">
          <div class="flexcolumn">
            <h3>I am Decision #3a</h3>
            <figcaption>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.</figcaption>
          </div>
          <button onClick="clickHandler('#target1')">CLICK</button>
        </figure>
        <figure id="tree2" class="fadebox rightbox lime">
          <div class="flexcolumn">
            <h3>I am Decision #3b</h3>
            <figcaption>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.</figcaption>
          </div>
          <button onClick="clickHandler('#target1')">CLICK</button>
        </figure>
      </div>
    </div>
  </section>
</div>
 嘿，如果您制作了Codepen或jsfiddle，会容易得多。这是一个很长的解释，很难遵循。抱歉，我没有解决方案，但是如果您做一个jsfiddle，我会尽力帮助您。

问题描述投票：2回答：2

仅CSS解决方案

基于JavaScript的解决方案

2个回答

最新问题

CSS过渡，绝对定位和：target的问题

问题描述 投票：2回答：2

仅CSS解决方案

基于JavaScript的解决方案

2个回答

最新问题

问题描述投票：2回答：2