Understanding Elementor Absolutely Positioned Content (in Sections, not Containers)

Learn how absolute positioning works in Elementor and how to perfectly center absolutely positioned content in sections. If you've enabled the Flexbox containers experiment, this won't apply.
A quick look at:
- Elementor absolute positioning basics
- Centering absolutely positioned content
- Using absolute positioning to add some flair to a website
Questions? Comments? Please reach out!
Don't have Elementor Pro? It's well worth the investment! Get Elementor Pro (we may get a small kickback for teaching and referring):
trk.elementor.com/kg

[@franktielemans6624]

you can also center postiting an element with 50% combined with transform translate -50
In Elementor we can use the setting transform => offset = > offsetY of offsetX -50%

[@stevemcirvin]

Thank you so much for explaining this. I would not have figured this out on my own. Removing the zeros is not exactly intuitive, so I'm grateful that you called that out! Great video :-)

[@KingGrizzly]

Steve, you are the best. We should record a live chat with Chris and you for this channel.

[@stevemcirvin]

@@KingGrizzly I would love to do something like "let's compare Elementor's hosted solution with Wix, Squarespace, GoDaddy page builder, etc." I think there's a lot of people that are on the bubble of deciding between a full-blown WordPress site and one of the small business focused page builders, so that would be a good live discussion to get your raw first impressions looking at a non-WordPress platform and what you like vs. what seems terrible...

[@KingGrizzly]

@@stevemcirvin I like this. Observe key differences, pros/cons. Now: figuring out when to do this! 🙂

[@stephend3961]

Your video is already obsolete. The good folks at Elementor keeps changing the menus/options around so much I could see how it would be hard to keep up.

[@KingGrizzly]

Doh! Depends on whether containers experiment is activated. We'll have to do another for containers. Thanks for the heads up.

[@cover4003]

How to make it close to the leftmost edge. As shown in the video, it is close to the left edge of the container, not the outside

[@KingGrizzly]

You mean the leftmost edge of the browser window? If so, here are some ideas:
- Make your container full width and remove the left and right padding. Put another boxed width container inside for your content, but then place any absolutely positioned elements outside of the inner container.
- Or, If you know the distance to the edge of the viewport, put a negative left or right value on the absolutely positioned item which matches the distance
- Or, put the absolutely positioned item in a separate, full width container, with no padding, above or below your container and then just offset the element until it shows where you want. If it's the only element in its container, the container should collapse and not show