Nested absolute positioning bug

[oney]

If not using auto layout, css will set the parent position: relative; with the child position: absolute;. But if it's nested non-auto layout, it generates things like

<div
  style="
    width: 57px;
    height: 57px;
    left: 11px;
    top: 4px;
    position: absolute;
    position: relative;">

It should not add position: relative; when there is position: absolute;.

[bernaferrari]

Ooops! That must have appeared in the latest re-writing.

Do you have a sample at Figma for me to look at and fix more easily?

[oney]

Please see "Issue1" frame in https://www.figma.com/file/EyQ0Dck1wzPfg0thNeBnAM/Sharing?node-id=35%3A8

<div class="Issue1" style="width: 344px; height: 560px; background-color: rgba(76.31, 168.24, 234.81, 1); position: relative;">
  <div class="Frame27" style="width: 226px; height: 219px; left: 37px; top: 18px; position: absolute; background-color: rgba(218.88, 25.54, 25.54, 1);"></div>
  <div class="Frame25" style="width: 218px; height: 261px; left: 78px; top: 192px; position: absolute; background-color: white; position: relative;">
    <div class="Frame26" style="width: 123px; height: 92px; left: 24px; top: 21px; position: absolute; background-color: rgba(191.25, 191.25, 191.25, 1);"></div>
    <div class="Frame28" style="width: 67px; height: 72px; left: 58px; top: 94px; position: absolute; background-color: rgba(5.12, 181.69, 1.51, 1);"></div>
  </div>
</div>

Here it is

<div
      class="Frame25"
      style="
        width: 218px;
        height: 261px;
        left: 78px;
        top: 192px;
        position: absolute;
        background-color: white;
        position: relative;
      "
    >

---

BTW, I found another problem about absolute positioning. Please see "Issue2" frame in the same Figma file. When red box and white box don't overlap, it generates display: inline-flex; using flexbox layout. However, this makes generate HTML doesn't look much like in Figma. https://codepen.io/hgged/pen/YzpqrQQ

Not sure, but one solution is always using absolute position when not auto layout.

[oney]

For Issue2, I might find a easy solution

Now it generates

<div class="Issue2" style="padding-top: 18px; padding-bottom: 42px; padding-left: 37px; padding-right: 45px; width: 344px; height: 560px; background-color: rgba(76.31, 168.24, 234.81, 1); display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;">
  <div class="Frame27" style="width: 226px; height: 219px; background-color: rgba(218.88, 25.54, 25.54, 1);"></div>
  <div style="height: 20px;"></div>
  <div class="Frame25" style="width: 218px; height: 261px; background-color: white; position: relative;">
    <div class="Frame26" style="width: 123px; height: 92px; left: 24px; top: 21px; position: absolute; background-color: rgba(191.25, 191.25, 191.25, 1);"></div>
    <div class="Frame28" style="width: 67px; height: 72px; left: 58px; top: 94px; position: absolute; background-color: rgba(5.12, 181.69, 1.51, 1);"></div>
  </div>
</div>

First, fix class="Issue2"'s align-items: flex-end; justify-content: flex-end; to be align-items: flex-start; justify-content: flex-start; And add margin-left: 44px; to class="Frame25". It becomes https://codepen.io/hgged/pen/XWNdezb

[bernaferrari]

Fixed and updated.

The margin thing I've been post-poning for a while and it got worse since AutoLayout 3. I need to fix someday.