I have created a component which is invoked as below:
<div class="hptout dtbreak" id="perfectFit" style="position: relative;">
<sly data-sly-resource="${'carousapart1' @ resourceType='wcm/foundation/components/parsys'}"/>
<sly data-sly-resource="${'carousapart2' @ resourceType='wcm/foundation/components/parsys'}"/>
<sly data-sly-resource="${'carousapart3' @ resourceType='wcm/foundation/components/parsys'}"/>
</div>
The component code is
<sly data-sly-use.carousalParts="com.demo.myapp.models.CarousalParts">
<sly data-sly-test="${carousalParts.partNum == '1'}">
<div class="flexbox row center align-stretch someSome">
<sly data-sly-include="parts.html"/>
</div>
</sly>
<sly data-sly-test="${carousalParts.partNum == '2'}">
<div class="flexbox row center align-stretch someSome2" style="position: absolute;z-index: 2;top: 0;width: 100%;">
<sly data-sly-include="parts.html"/>
</div>
</sly>
<sly data-sly-test="${carousalParts.partNum == '3'}">
<div class="flexbox row center align-stretch someSome3" style="position: absolute;z-index: 1;top:0;width: 100%;">
<sly data-sly-include="parts.html"/>
</div>
</sly>
</sly>
However when the 3 instances of the component are executed and rendered on the page, the output comes as nested one inside the other in the final HTML of the page. The divs need to be siblings and instead end up in a parent-child relationshop thus breaking the page. I am trying to understand what could be wrong with the above sightly code and any help would be appreciated.
