DUPLICATE: Absolute positioning in builder

[ainom]

Bricks Version: 1.6B

THis is a bug that’s been present for quite some time, I’m surprised it hasn’t been fixed yet. I suppose it’s been waiting for someone to file it.

Sometimes, absolute positioning doesn’t work in the builder (although it works on the front end). The problem is that the absolute positioning style is overwritten at the element level.

In the builder (note the absolute positioning specified):

The console:

[timmse]

Hi Eric,
Thanks so much for your report! You are the first to report this problem, so we can’t fix what we don’t know about

Unfortunately, I cannot reproduce the issue. We need a reproducible way to turn the “sometimes” into an “always”

Best regards,
timmse

[ainom]

Well I guess it doesn’t exist then. Must be my wild imagination again.

[msabolik]

I think I had an issue related to this. So I had a short code element with absolute positioning overlaying particles decoration on a hero section. The short code element was inside the hero section. After update to 1.6 it was moved down bellow the hero content (title and button). So I moved the absolute child element (the short code element) above (outside) the parent element (hero section) and added z-index 1 to the short code element to show it above the background image of the hero, also added z-index 2 to the hero content (title and button) to be shown above the particles decoration. So there was no way to position the child element absolute inside another section, div, block, etc. It inherits the relative positioning of the parent.

[timmse]

Have you set an overlay/gradient in one of the parent elements of the overlay block? That would explain the position: relative, see:

SOLVED: All absolute positioned elements are broken with 1.6 Beta 2

Hi Min, Thanks so much for your report! The problem arises from the section’s overlay setting. The overlay is positioned absolutely so that the child elements must have a position other than static. And this is where #section-id > * { position: relative; } comes into play, giving each direct child element position: relative. We introduced this rule because we got a lot of reports like “the overlay covers my elements” and wanted to make it easier for the majority of users. Because the rule is…

This is the same problem @msabolik describes. If you look in the computed styles, you can see where position: relative is coming from. Without a link, I can only guess what is going on.

Best regards,
timmse

[msabolik]

Yes my parent element has and overlay as well. So until the :where fix is implemented you can move the child absolute element outside (above) the parent element and it should work as a temporary fix.

[timmse]

Ok, I assume it’s the identical problem. I’ll mark the thread as a duplicate accordingly and close it. Get back to me, Eric, if it’s not fixed in the next version.