Extra layer info

Author: aeagle

react-spaces/src/components/stories/00-docs/04-ChangeHistory.stories.mdx

@@ -7,10 +7,14 @@ import { CommonHeader } from "../Utils";
 
 ## Change history
 
-### 0.1.23 - 0.1.24
+### 0.1.24
 
-- Fixed generation of head styles height and z-index which were missing a semi-colon.
 - Fixed NPM readme
+- Added CHANGELOG.md
+
+### 0.1.23
+
+- Fixed generation of head styles height and z-index which were missing a semi-colon.
 
 ### 0.1.22
 

react-spaces/src/components/stories/02-components/Layer.stories.mdx

@@ -13,7 +13,40 @@ import { CommonHeader, description, PropsTable, Prop } from "../Utils";
 
 ## Layer
 
-Groups child spaces and places them all at a certain `zIndex`.
+Groups child spaces and places them all at a certain `zIndex`. 
+
+Spaces only interact with each other when they are in the same `zIndex`.
+
+Spaces in a higher `zIndex` overlap spaces in a lower `zIndex`.
+
+```tsx
+<ViewPort>
+	<Layer zIndex={2}>
+		<LeftResizable size={200}>...</LeftResizable>
+	</Layer>
+	<Layer zIndex={1}>
+		<Fill>...</Fill>
+	</Layer>
+</ViewPort>
+```
+
+In the example above, the `<Fill />` space size is not affected by the `<LeftResizable />` space because
+they have been placed at different levels within the `<ViewPort />`. The `<LeftResizable />` space also
+overlaps the `<Fill />` space because it is in a higher layer.
+
+An alternate way of specifying the layer is by specifying a zIndex directly on the spaces:
+
+```tsx
+<ViewPort>
+	<LeftResizable size={200} zIndex={2}>...</LeftResizable>
+	<Fill zIndex={1}>...</Fill>
+</ViewPort>
+```
+
+This is preferable when moving spaces between different layers without causing a remount on children
+inside the space.
+
+### Positioned spaces in different layers
 
 <Preview>
 	<Story name="Default">