Перенос разметки в Livewire

Давайте разберём такой случай. Панель должна висеть над всей страницей, а в разметке она сидит внутри карточки с обрезанным краем: часть блока не видна, хотя по задумке это всплывающий слой, а не строка внутри узкой рамки.

Директива teleport переносит фрагмент в указанный узел документа, чаще всего в конец body, и на экране он больше не упирается в родительский контейнер.

Страница откроется по адресу /posts/float. Давайте создадим компонент PostFloat:

php artisan make:livewire PostFloat --class

Давайте оставим класс без свойств:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostFloat extends Component
	{
		public function render()
		{
			return view('livewire.post-float');
		}
	}
?>

Давайте покажем карточку и перенесём панель в конец страницы:

<div
	style="overflow: hidden; height: 80px;"
>
	<div>Card</div>
	@teleport('body')
		<div>Panel</div>
	@endteleport
</div>

Давайте добавим маршрут и страницу:

<?php
	Route::get('/posts/float', function () {
		return view('posts-float');
	});
?>

<x-layout>
	<livewire:post-float />
</x-layout>

Создайте компонент EmployeeFloat. Панель работника оказывается в конце страницы, а не внутри карточки.