This is probably something silly, but I just can't find a solution: I have a scrolling column of car...

# compose

[Marcin Wisniowski]

This is probably something silly, but I just can't find a solution: I have a scrolling column of cards, with a header with a shadow (elevation) at the top (screenshot 1). For some reason, the header's shadow is not visible when a card is under it (screenshot 2). Why is that? How to fix it?

[Marcin Wisniowski]

Column(
        modifier = Modifier.background(MaterialTheme.colors.background)
    ) {
        Surface(
            elevation = 8.dp,
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Header with shadow")
        }
        LazyColumn(
            contentPadding = PaddingValues(
                vertical = Dimensions.verySmall,
                horizontal = Dimensions.small
            )
        ) {
            items(List(50) {}) {
                Card(
                    shape = MaterialTheme.shapes.medium,
                    elevation = 2.dp,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = Dimensions.verySmall)
                ) {
                    Text("Card")
                }
            }
        }
    }

[Andrey Kulikov]

set Modifier.zIndex(1f) on your header

[Marcin Wisniowski]

Thank you! I knew it must be something simple. 😄

[Colton Idle]

oooh. I wonder if I can use zIndex on a modal bottom sheet so that it appears on top of my bottom nav bar. TIL about zindex. thanks Andrey