custom_fields absolute position not working

Describe the bug Following the documentation on custom_fields here (https://github.com/custom-cards/button-card#custom-fields) together with position: I expect to be able to position a nested card on top of the main card. However, it is positioned adjacent to it.

Version of the card Version: 3.4.1

To Reproduce This is the configuration I used:

entity: lock.haustur
show_name: true
show_state: false
state:
  - value: locked
    entity_picture: /local/images/nuki/nuki_locked_alpha.png
  - value: unlocked
    entity_picture: /local/images/nuki/nuki_unlocked_alpha.png
show_entity_picture: true
tap_action:
  action: call-service
  service: lock.open
  service_data:
    entity_id: lock.haustur
size: 60%
styles:
  card:
    - '--mdc-ripple-color': black
    - '--mdc-press-opacity': 0.5
  grid:
    - position: relative
  custom_fields:
    - position: absolute
    - top: 50%
custom_fields:
  State:
    card:
      type: markdown
      content: '[[[ return entity.state ]]]'
      style: |
        ha-card {
          box-shadow: none;
        }

Screenshots This is the resulting card:

Expected behavior I would like to see the state locked written in the center of the circle

Desktop (please complete the following information):

• Browser: Edge
• Version 87.0.664.66

Smartphone (please complete the following information):

• Device: Samsung S20
• OS: Android 11
• Home Assistant App

[kongo09]

Thanks, adding pointer-events: none indeed does work. I just read in issue #410 that this behaviour is expected but the solution is as simple as it is elegant.

For the benefit of anyone ever reading this, here is my full card code which I use to control a Nuki lock:

type: 'custom:button-card'
entity: lock.wohnung
show_name: true
show_state: false
state:
  - value: locked
    entity_picture: /local/images/nuki/nuki_locked_alpha.png
  - value: unlocked
    entity_picture: /local/images/nuki/nuki_unlocked_alpha.png
tap_action:
  action: call-service
  haptic: medium
  service: script.toggle_nuki_door
  service_data:
    nuki_lock_id: lock.wohnung
double_tap_action:
  action: call-service
  haptic: medium
  service: lock.open
  service_data:
    entity_id: lock.wohnung
show_entity_picture: true
size: 60%
styles:
  card:
    - '--mdc-ripple-color': black
    - '--mdc-press-opacity': 0.5
  grid:
    - position: relative
  custom_fields:
    State:
      - position: absolute
      - top: 50%
      - left: 50%
      - font-size: 80%
      - transform: 'translate(-50%, -60%)'
      - pointer-events: none
custom_fields:
  State:
    card:
      type: markdown
      content: '[[[ return entity.state ]]]'
      style: |
        ha-card {
          box-shadow: none;
          background: none;
        }

As the lock entity doesn’t know any toggle, I call a script depending on state:

alias: Toggle Nuki Door
sequence:
  - choose:
      - conditions:
          - condition: state
            entity_id: lock.wohnung
            state: locked
        sequence:
          - service: lock.unlock
            data: {}
            entity_id: lock.wohnung
      - conditions:
          - condition: state
            entity_id: lock.wohnung
            state: unlocked
        sequence:
          - service: lock.lock
            data: {}
            entity_id: lock.wohnung
    default: []
mode: queued
icon: 'mdi:lock'
max: 3
fields:
  nuki_entity_id:
    description: Entity of Nuki door
    example: lock.wohnung
description: Toggle the open status of a Nuki door

[RomRider]

You can maybe try by adding pointer-events: none to the style of your custom_field named State. However, what you are having is the expected behavior. A child card will catch the events, thus the the child card action defined in its own config is executed.