🔨 Fix for element positioning (#2335)

* Fix for element positioning

* Address comments

gallery/src/demos/demo-hui-picture-elements-card.ts

@@ -76,6 +76,55 @@ const CONFIGS = [
         left: 35%
     `,
   },
+  {
+    heading: "Card with header",
+    config: `
+- type: picture-elements
+  image: /images/floorplan.png
+  title: My House
+  elements:
+    - type: service-button
+      title: Lights Off
+      style:
+        top: 97%
+        left: 90%
+        padding: 0px
+      service: light.turn_off
+      service_data:
+        entity_id: group.all_lights
+    - type: icon
+      icon: mdi:cctv
+      entity: camera.demo_camera
+      style:
+        top: 12%
+        left: 6%
+        transform: rotate(-60deg) scaleX(-1)
+        --iron-icon-height: 30px
+        --iron-icon-width: 30px
+        --iron-icon-stroke-color: black
+        --iron-icon-fill-color: rgba(50, 50, 50, .75)
+    - type: image
+      entity: light.bed_light
+      tap_action:
+        action: toggle
+      image: /images/light_bulb_off.png
+      state_image:
+        'on': /images/light_bulb_on.png
+      state_filter:
+        'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)
+        'off': brightness(80%) saturate(0.8)
+      style:
+        top: 35%
+        left: 65%
+        width: 7%
+        padding: 50px 50px 100px 50px
+    - type: state-icon
+      entity: binary_sensor.movement_backyard
+      style:
+        top: 8%
+        left: 35%
+    `,
+  },
 ];
 
 class DemoPicElements extends PolymerElement {

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -63,15 +63,15 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     return html`
       ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
-        <hui-image
-          .hass="${this._hass}"
-          .image="${this._config.image}"
-          .stateImage="${this._config.state_image}"
-          .cameraImage="${this._config.camera_image}"
-          .entity="${this._config.entity}"
-          .aspectRatio="${this._config.aspect_ratio}"
-        ></hui-image>
         <div id="root">
+          <hui-image
+            .hass="${this._hass}"
+            .image="${this._config.image}"
+            .stateImage="${this._config.state_image}"
+            .cameraImage="${this._config.camera_image}"
+            .entity="${this._config.entity}"
+            .aspectRatio="${this._config.aspect_ratio}"
+          ></hui-image>
           ${
             this._config.elements.map((elementConfig: LovelaceElementConfig) =>
               this._createHuiElement(elementConfig)
@@ -85,9 +85,9 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
   private renderStyle(): TemplateResult {
     return html`
       <style>
-        ha-card {
+        #root {
-          overflow: hidden;
           position: relative;
+          overflow: hidden;
         }
         .element {
           position: absolute;