Problem with CSS transition, absolute positioning, and :target - css

Question

I am trying to develop a single-screen, pure css website interface that allows a User to click through a series of choices. The goal is to allow the User to self-select their way to a desired action (signup, contact form, load a new page, etc).
My approach was to put several absolutely positioned divs in a relatively positioned wrapper, then use a combination of z-index and :target to achieve the desired result.
The issue I am encountering is the transition between slides (each slide displays two choices the User can make). In the first test (A/B Slide Choice Test (Working) the transtion works by sliding divs from left to right. The two subsequent slides are absoultely positioned to right:100%, then right:0 using :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%;
}
The result is working as desired - when clicking on choice 1A or 1B, the transitions are occuring and the correct slides are displayed.
But in the second test, A/B Slide Choice Test (not working), the two subsequent divs, Slide 2 and 3, are absoultely positioned to left:100%, then left:0 using :target
#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%;
}
Several things are happening:
Clicking on decision 1A:
Result: Slide 3 (#target3) moves into position without transition.
Expected: Slide 2 (#target2) slides in from the right side of the screen.
As near as I can tell, clicking on 1A is activating the wrong target and/or Slide 2 and 3 are both moving to the left (with Slide 2 being pushed all the way offscreen to the left). Then if you click choice 3A the transition works properly (slides back to the right, revealing Slide 1 again)
Clicking on decision 1B:
Result: Slide 3 (#target3) suddenly appears, and moves to offscreen (to the left) with transition, revealing Slide 2 (#target2).
Expected: Slide 3 (#target3) slides in from the right side of the screen.
Then if you click choice 2B the transion works properly (the sldie goes back to the right, revealing Slide 1 again)
I have tried this absolutely positioned transition using using top:100% and top:0, and bottom:100% and bottom:0
The same issue occurs: Using absolutely positioned 'top' values works, while 'bottom' values creates the undesired behavior.
I want to be able to use transtions in any direction, the ultimate goal being that 'direction' will be a configurable backend parameter in a Joomla module. The module is actually written, installed, and working properly except for this transition issue.
I don't know if :target is somehow breaking the desired behavior, or if I'm doing something wrong with absolute positioned CSS values, or both. Or if my (limited) understanding of Flexbox is messing things up.
I am completely open to using a different method of getting the desired behavior shown in the working version (ideally using CSS only) if that's what is required.
But so far in my internet searches I haven't found any code snippets or examples of the one-screen A/B interface I am trying to accomplish.
I am extremely grateful for any assistance!
EDIT: I've been playing around with values to see if I can get a better understanding of what's going on.
#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%;
}
In theory (as far as my understanding goes), with the CSS above, there should be no change as both values are left:100%
But in practice clicking on decision 1A or 1B causes #target2 and #target3 to move onscreen (though without transition).
Then I added multiple slides into the relatively positioned wrapping div, and what I've found is that all the slide IDs are affected (#target2, #target3, #target4, #target5 etc.).
Again my understanding is that clicking on the href="#target2" should only affect #target2:target, but it is affecting all other slide IDs, making me think that position:absolute and :target are conflicting somehow.
(bangs head on desk)

Answer 1

The issue that you are running into is indeed that the position:absolute and the targeting are conflicting. The way they are conflicting is because the browser tries to scroll to the right location because you are using anchor tags. Then the position starts to change which causes the element you want to show up to disappear.
So, your two choices to get it to really work how you want are to prevent the browser from scrolling. e.g. Abandon the anchor tags to prevent the browser from scrolling instead of you (maybe a sprinkle of JS instead?).
Or you can go all in on the scrolling and leave out the change in location from the absolute positioning.
CSS only solution
Since you asked for even alternatives (preferably without JS), here's using CSS scroll snapping (CSS Tricks) to do the heavy lifting of the transitions. All your markup is the same.
Main pieces of this solution that are of note:
the html element is the one that has the scrollbar in this case, so it needs the scroll-snap-type and behavior
html {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
All of the targets need to be snapping points:
#target1,
#target2,
#target3 {
scroll-snap-align: center;
}
Those were the main two things to get this working at a base level, but there were a couple other interesting additions to get it to look a bit nicer.
We need to increase the targets to a larger z-index when they are targeted so they'll always be on top.
#target2:target,
#target3:target {
z-index: 5;
}
Target 1 needs to be fixed position when it's not targeted so it looks like it stays in one location as it's being scrolled off of (unfortunately I couldn't come up with a good way to get the reverse done).
#target1:not(:target) {
position: fixed;
left: 0;
}
There needs to be a transition on the z-index specifically in this case so target2 doesn't immediately go under target 3 when it is transitioning off screen
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>
CLICK
</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>
CLICK
</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>
CLICK
</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>
CLICK
</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>
CLICK
</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>
CLICK
</figure>
</div>
</div>
</section>
</div>
Important to note, you won't get the effect of this from the minimized result because it seems to require at least a certain height to work. So you'll have to run the snippet then click full screen.
JavaScript based solution
As was mentioned a JS solution is fine as long as it is explained well / simple enough:
In this case, the JS is as follows. The actual pieces are commented to make them easier to follow. In general, instead of using :target, this solution works by toggling the .selected class in elements instead. The main benefit of this is to get rid of the browser's scrolling events that anchor tags provide.
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');
}
The CSS changes are also minor:
instead of using :target, we use .selected
#target2.selected,
#target3.selected {
left: 0;
}
The html changes I made were changing the a tags to buttons (to be more semantically correct) and gave them an onClick event handler:
<button onClick="clickHandler('#target3')">CLICK</button>
For the sake of display within stack overflow due to it providing such a short and squat window by default, I set min-height to be 390px (so there is a base size to avoid the weirdnesses from having everything based on % when they don't fit)
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>

Answer 2

hey man it will be much easier if you made a codepen or a jsfiddle. Its a pretty long explanation and pretty hard to follow through. sorry i dont have the solution but if you make a jsfiddle i will help you with what i can.