| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { margin: 0; } |
| |
| .flex-column { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .sticky-header { |
| top: 0; |
| height: 50px; |
| background: blue; |
| z-index: 100; |
| } |
| |
| .columns { |
| padding-left: 40px; |
| column-count: 2; |
| column-gap: 24px; |
| } |
| |
| .list-item { |
| display: list-item; |
| } |
| |
| .consent-bar { |
| position: relative; |
| width: 100%; |
| z-index: 999999; |
| } |
| |
| .dialog { |
| position: fixed; |
| top: 100px; |
| left: 0; |
| right: 0; |
| max-width: 500px; |
| width: auto; |
| margin: 0 auto; |
| height: 50px; |
| border: 2px solid black; |
| background: white; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="flex-column"> |
| <div class="sticky-header"></div> |
| <footer> |
| <div> |
| <div class="columns"> |
| <div class="list-item">Item</div> |
| <div class="list-item"> |
| <div class="consent-bar"> |
| <div class="dialog">content</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
| </div> |
| </body> |
| </html> |
