[Idea] CSS position settings

[drawcard]

I'm just throwing an idea out there (not urgent, since you can use Custom CSS to handle this)

But it would be nice if there were options for elements to control positioning. I noticed that each column has position: relative; applied to it, and therefore if you apply position: absolute to elements, you can move things around in that column precisely.

So I am thinking, perhaps a dropdown like:
Position: [setting] set to static by default, but also having absolute & relative

then a set of value controls (like margin or padding values):
top: 0px/% left: 0px/% right: 0px/% bottom: 0px/%
(along with responsive breakpoint settings)

and finally, z-index settings in a text field.

I just get the odd request sometimes from a client that they want to put an element exactly -20px to the top left of some other thing and if I don't write custom CSS, I resort to negative margins to fudge it 😱

[drawcard]

I also thought about fixed positioning but that's probably going to create havoc in the previewer (unless it's not rendered at all during preview, like how you treat hidden elements for various breakpoints)

[katart]

I think I should make a comment about my issue in this thread.

I noticed that all elementor-widget-wrap elements have a z-index equal to 1. I think this is causing an overlay issue on any other elementor widget higher up in the DOM.

I created a Button with Tooltip Shortcode that uses an absolute positioned Tooltip Popup with a z-index equal to 999. If this Tooltip is close to another Elementor widget, the high z-index has no affect on surrounding widgets farther down the DOM. I can't seem to make the Tooltip display over any other Elementor Widgets. I assume that's because of the z-index: 1 on the elementor-widget-wrap.

Does this make sense? and how can this be fixed?

[drawcard]

Couple of ideas:

• Set the button's container div to z-index: 999 as well. In Chrome Inspector, look for the unique ID that each elementor container is given & write some CSS to bump the Z-index up
• (warning: not pretty) use !important if you have to to override the elementor behaviour

You can experiment around with the Custom CSS panel in Elementor Pro + using selector { ... } to target whatever element you're working on.

[drawcard]

Also you may want to create a seperate issue (in case the one I raised gets closed). FWIW I have also used JSTooltipster + Elementor on other sites without any z-index problems: http://iamceege.github.io/tooltipster/

[arielk]

Z-index option will be released in version 1.5

Also please read this issue: #1743

Thanks for your feedback!

[temsool]

Need this feature too

[hufer]

Piotnet Addons For Elementor can do it for you
https://pafe.piotnet.com/#absolute-positioning