flutter_html icon indicating copy to clipboard operation
flutter_html copied to clipboard

[FEATURE] Is is posible to add support in z-index css attribute

Open vickyGeo opened this issue 8 months ago • 3 comments

Describe your feature request

Is is posible to add support in z-index css attribute?

vickyGeo avatar Apr 17 '25 10:04 vickyGeo

It's possible, but not a high priority, since it doesn't seem like this feature is useful given that most html elements don't overlap (we don't support float-based or absolute positioning).

Do you have an example of a use-case where you need the z-index?

Sub6Resources avatar Apr 21 '25 19:04 Sub6Resources

thank you for your response yes, I do have a clear use case where z-index is essential.

In our use case, we're dynamically rendering a room preview based on user-selected customization options — like wall color, ceiling texture, and flooring material. Each element is returned from the server as a transparent PNG that only contains that specific visual layer. These images are then stacked using z-index inside a container to form the final composite view.

This stacking wouldn't be possible without z-index or absolute positioning, because the images need to fully overlap and be ordered correctly (e.g., walls behind furniture, ceiling on top, etc.). These are not just decorative elements — they’re modular layers that together form a single cohesive image.

Without z-index, we can’t control which layer appears in front or behind the others, which breaks the visual correctness of the preview.

So while it's true most HTML elements don’t overlap, in our case overlapping is a core part of the functionality — not an edge case.

Code sample

<div class="room-preview">
  <img src="walls.png" class="layer" style="z-index: 1;">
  <img src="ceiling.png" class="layer" style="z-index: 2;">
  <img src="floor.png" class="layer" style="z-index: 3;">
</div>

.room-preview {
  position: relative;
  width: 500px;
  height: 400px;
}
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

vickyGeo avatar Apr 22 '25 07:04 vickyGeo

Ah, so you are requesting that we also add relative and absolute positioning. That would certainly make the z-index use case more compelling.

Unfortunately, supporting absolute/relative positioning isn't high on our priority list either since it would require reworking our entire layout algorithm. For your use case, you might consider developing an algorithm to generate a Flutter Stack from your different images, or alternatively, use a flutter webview. You'll get more fine-grained control and much better performance.

Sub6Resources avatar Apr 22 '25 23:04 Sub6Resources