[Solved] CSS Translate Doesn't Stick Elements

[bmoneruiux]

Currently having an issue getting elements stuck where I want them to be stuck. I have three floating cards that I have CSS translated into position, however the translation doesn’t stick them with regard to the parent. The translation, sadly, is dependent on the child element it’s applied to.

http://codepen.io/bmoneruiux/full/mJbvQv

How can I get these cards where I need them without using the translate and without disturbing the existing elements in the box??

[Paulie_D]

Not sure which cards you are referring to but translate doesn’t refer to the parent …it’s entirely referring to the element itself.

[bmoneruiux]

Yes, I found that out the hard way sadly. But in the CodePen example I linked, there’s an image of a craps table (scroll for it). It’s like the 3rd parallax/scroll element down.

There are 3 cards floating on that screen. Those are the cards I’m talking about.

[Paulie_D]

Sounds to me as though they should be positioned absolutely with reference to their parent…which would have position:relative.

Of course, without knowing what this is supposed to look like, it’s hard to be certain.

[bmoneruiux]

That what I was thinking as well. Now I’m sure I was doing it totally wrong but overtime I tried I had two problems:

1) The positioning interfered with other elements in .casino-box
2) The cards would jump to the top of the page (so I def wasn’t doing something right with regards to the containment of the cards)

[Paulie_D]

The positioning interfered with other elements in .casino-box

Position:absolute wouldn’t do that as the elements are taken out of the flow.

The cards would jump to the top of the page

This sounds as though the parent element didn’t have position:relative.

[bmoneruiux]

Thank you, Paulie-D. You’ve found my problem. I thought I had position:relative on the parents. Thanks for that correction.

[Author]

Posts