diff --git a/README.md b/README.md
index d3cd26e..512bcf0 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ it and how it looks.
 
 ## Features
 - it's portaled (always visible, even if inside e.g modal with overflow: hidden)
+- may be nested
 - if content has not enough space on one side it will try to render on other side. For instance if position is set to `top-left` and there's no room on top position will be set to `bottom-left`. This feature listens to window resize event
 - may be open/closed on every trigger and content event or from outside
 - you decide how trigger and content looks
@@ -93,10 +94,35 @@ Each slot gets theese props, available through let:propName
 
 ## Usage
 
-### Close on escape keydown and click outside
+### Close on escape keydown and click outside [REPL](https://svelte.dev/repl/08a2a569d1354426ab747445ece60fcb?version=3.22.2)
 
 ```javascript
+<script>
+  import Overlay from 'svelte-overlay';
+	let isOpen = false;
+	
+	function handleWindowKeyDown(event) {
+		if (event.key === 'Escape') {
+			isOpen = false;	
+		}
+	}
+</script>
+
+<Overlay
+	onWindowKeyDown={handleWindowKeyDown}
+	closeOnClickOutside
+	bind:isOpen={isOpen}
+>
+  <button slot="parent" let:toggle on:click={toggle}>
+    Click Me!
+  </button>
+
+  <div slot="content" let:close>
+    <p>Lorem ipsum dolor sit.</p>
+    <button on:click={close}>Close</button>
+  </div>
 
+</Overlay>
 ```
 
 ### Close from content [REPL](https://svelte.dev/repl/a13dde11268a4ec6a560add54287c8f2?version=3.22.2)
@@ -145,12 +171,6 @@ Each slot gets theese props, available through let:propName
   import Overlay from 'svelte-overlay';
   let isOpen = false;
 
-  function handleToggle(event) {
-    if (event.detail !== isOpen) {
-      isOpen = event.detail;
-    }
-  }
-
   function toggleFromOutside() {
     isOpen = !isOpen;
   }
@@ -158,8 +178,8 @@ Each slot gets theese props, available through let:propName
 
 <button on:click={toggleFromOutside}>Toggle from outside</button>
 
-<Overlay {isOpen} >
-  <div slot="parent" on:toggle={handleToggle}>
+<Overlay bind:isOpen={isOpen} >
+  <div slot="parent">
     I am a parent
   </div>
 
@@ -195,7 +215,7 @@ Each slot gets theese props, available through let:propName
   on:toggle={handleToggle}
   closeOnClickOutside
   zIndex={100}
-  {isOpen}>
+  bind:isOpen={isOpen}>
   <button slot="parent" let:toggle on:click={toggle}>Click Me!</button>
   <div slot="content" transition:fly={{ y: 5, duration: 200 }} class="content">
     Lorem ipsum dolor sit.
@@ -229,6 +249,32 @@ Each slot gets theese props, available through let:propName
 
 ```
 
+### Nested with click outside and close on esc key [REPL](https://svelte.dev/repl/284b4a09eddc4b64b5bd6734712d30ee?version=3.22.2)
+
+```javascript
+<script>
+  import Overlay from 'svelte-overlay';
+  let isOpen = false;
+
+  function toggleFromOutside() {
+    isOpen = !isOpen;
+  }
+</script>
+
+<button on:click={toggleFromOutside}>Toggle from outside</button>
+
+<Overlay bind:isOpen={isOpen} >
+  <div slot="parent">
+    I am a parent
+  </div>
+
+  <div slot="content">
+    Lorem ipsum dolor sit.
+  </div>
+
+</Overlay>
+```
+
 ---
 
 ## License
diff --git a/package.json b/package.json
index 79c2d92..f63783a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "svelte-overlay",
-	"version": "1.3.1",
+	"version": "1.4.0",
 	"description": "Svelte Overlay component. Great for creating dropdowns, tooltips and popovers",
 	"author": "Mariusz Wachowski",
 	"keywords": [
diff --git a/src/App.svelte b/src/App.svelte
index c33a859..cef4d6c 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -5,16 +5,17 @@
 	import { fly } from 'svelte/transition';
 
 	let isOpen = false;
+	let isNestedOpen = false
 	let selectedPosition = POSITIONS[0];
 
-	let mouseOnContent = false;
-
-	function handleKeyDown(event, { close }) {
-		if (event.key === 'Escape') close();
-	}
-
-	function handleToggle(event) {
-		if (event.detail !== isOpen) isOpen = event.detail;
+	function handleKeyDown(event) {
+		if (event.key === 'Escape') {
+			if (!isNestedOpen) {
+				isOpen = false;
+			} else {
+				isNestedOpen = false;
+			}
+		}
 	}
 </script>
 
@@ -40,14 +41,23 @@
 		position={selectedPosition}
 		onWindowKeyDown={handleKeyDown}
 		closeOnClickOutside
-		on:toggle={handleToggle}
-		closeOnScroll
-		{isOpen}>
+		bind:isOpen={isOpen}
+		>
+		<button slot="parent" let:toggle on:click={toggle}>Click Me!</button>
+		<div transition:fly={{ y: 5, duration: 200 }} slot="content" class="content" let:close>
+	<Overlay
+		position={selectedPosition}
+		onWindowKeyDown={handleKeyDown}
+		closeOnClickOutside
+		bind:isOpen={isNestedOpen}
+		>
 		<button slot="parent" let:toggle on:click={toggle}>Click Me!</button>
 		<div transition:fly={{ y: 5, duration: 200 }} slot="content" class="content" let:close>
 			Lorem ipsum dolor sit amet consectetur, adipisicing elit. At eligendi vel quidem voluptatum sed, eius illo? Explicabo nam numquam tenetur blanditiis eum quisquam recusandae non consectetur saepe! Nihil commodi amet repudiandae nulla facere temporibus doloribus cupiditate. Aperiam quam consequatur eos magnam quaerat dolorem deserunt ratione similique nobis quasi, impedit hic ipsa officia, aut, praesentium porro. Repellendus beatae nisi earum error nam laboriosam incidunt repudiandae consectetur rem corporis perferendis, tempora quidem qui alias praesentium, hic ad excepturi corrupti quod? Nulla at magnam, harum, esse ullam sunt ipsam, assumenda voluptates accusantium dolor velit officiis cupiditate reprehenderit facere aliquid? Dolor, minima repellat corrupti odio fuga similique quo magnam accusamus officiis porro, ad dolorem quod. Sequi aspernatur suscipit ex nulla necessitatibus molestias inventore quidem iusto esse odit soluta totam atque assumenda, voluptatibus ratione et explicabo expedita obcaecati iure iste maiores impedit cupiditate. Facere a voluptates deserunt animi obcaecati adipisci voluptatem maiores dolores cum natus?
 		</div>
 	</Overlay>
+		</div>
+	</Overlay>
 </section>
 
 <style>
diff --git a/src/components/Overlay.svelte b/src/components/Overlay.svelte
index a622d20..9115a94 100644
--- a/src/components/Overlay.svelte
+++ b/src/components/Overlay.svelte
@@ -7,7 +7,7 @@
 		createEventDispatcher,
 	} from 'svelte';
 	import POSITIONS from './positions';
-	import { getNextPosition } from './helpers';
+	import { isBrowser, getNextPosition } from './helpers';
 	const dispatch = createEventDispatcher();
 
 	const DEFAULT_POSITION = POSITIONS[0];
@@ -25,9 +25,8 @@
 
 	let currentPosition = null;
 	let parent;
-	let contentWrapper;
 	let content;
-	let portal;
+	let target;
 
 	let topStyle = 0;
 	let leftStyle = 0;
@@ -42,11 +41,6 @@
 
 	$: openedState = isOpen && hasParent && hasContent;
 
-	// for SSR
-	function isBrowser() {
-		return typeof window !== 'undefined' && typeof document !== 'undefined';
-	}
-
 	function addListeners() {
 		if (!isBrowser()) return;
 		window.addEventListener('resize', updatePosition);
@@ -62,11 +56,6 @@
 	}
 
 	onMount(() => {
-		if (!isBrowser()) return;
-		portal = document.createElement('div');
-		document.body.appendChild(portal);
-		portal.appendChild(contentWrapper);
-
 		if (openedState) {
 			addListeners();
 		}
@@ -75,7 +64,6 @@
 	onDestroy(() => {
 		if (!isBrowser()) return;
 		removeListeners();
-		document.body.removeChild(portal);
 	});
 
 
@@ -108,16 +96,19 @@
 		if (openedState) toggle(false);
 	}
 
-	function handleWindowClick(event) {
-		if (!closeOnClickOutside || !openedState) return;
+	function contains (event) {
 		const path = event.path || event.composedPath();
-		if (path.includes(parent) || path.includes(content)) return;
+		return path.includes(parent) || path.includes(content);
+	}
+
+	function handleWindowClick(event) {
+		if (!closeOnClickOutside || !openedState || contains(event)) return;
 		close();
 	}
 
 	function handleWindowKeyDown(event) {
-		if (!openedState) return;
-		onWindowKeyDown(event, { isOpen: openedState, open, close, toggle });
+		if (!onWindowKeyDown || !openedState) return;
+		onWindowKeyDown(event, { isOpen: openedState, open, close, toggle, contains });
 	}
 
 	async function updatePosition() {
@@ -153,14 +144,14 @@
 	on:mousedown={handleWindowClick}
 	on:keydown={handleWindowKeyDown} />
 
-<div class={`overlay ${className}`} style={`z-index:${zIndex}; ${style}`}>
+<div bind:this={target} class={`overlay ${className}`} style={`z-index:${zIndex}; ${style}`}>
 	<div bind:this={parent}>
 		<slot name="parent" {toggle} isOpen={openedState} {open} {close} />
 	</div>
 	<div
-		bind:this={contentWrapper}
 		class="content-wrapper"
-		style={`top: ${topStyle}px; left: ${leftStyle}px; width: ${widthStyle}px; height: ${heightStyle}px; z-index:${zIndex};`}>
+		style={`top: ${topStyle}px; left: ${leftStyle}px; width: ${widthStyle}px; height: ${heightStyle}px; z-index:${zIndex};`}
+	>
 		{#if openedState}
 			<div class={`content ${currentPosition || ''}`} bind:this={content}>
 					<slot name="content" {toggle} isOpen={openedState} {open} {close} />
diff --git a/src/components/helpers.js b/src/components/helpers.js
index 13182d4..0dc79b7 100644
--- a/src/components/helpers.js
+++ b/src/components/helpers.js
@@ -4,6 +4,11 @@ const TOP = "top";
 const CENTER = "center";
 const BOTTOM = "bottom";
 
+// for SSR
+export function isBrowser() {
+  return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+
 export const getNextPosition = (position, dimensions) => {
   const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
   const clientWidth = Math.min(document.body.clientWidth, document.documentElement.clientWidth);