docs: add example about new layout

2 files changed, 30 insertions, 6 deletions

diff --git a/README.md b/README.md
index 3296bd5..8fec281 100644
--- a/README.md
+++ b/README.md
@@ -126,14 +126,24 @@ After `generateMaps()`, the container has the following structure:
 
 Dumbymap switch layouts by attribute `data-layout` of container. Most of the features are done by pure CSS.
 
-You can add custom layout by options `layouts`:
+You can add custom layout by options `layouts`. For example, the following code add a new layout `sticky` to stick `Showcase` at bottom right corner:
+
+```css
+.Dumby[data-layout='sticky'] {
+  .Showcase {
+    display: block;
+    width: 20vw;
+    height: 40vh;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: red;
+  }
+}
+```
 
 ```js
-generateMaps(container, {
-  layouts: [
-    "LAYOUT-NAME"
-  ]
-})
+generateMaps(container, { layouts: "sticky" })
 ```
 
 
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 19e3baf..d31d7e6 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -781,3 +781,17 @@ a[href^='http']:not(:has(img))::after,
     opacity: 0.3;
   }
 }
+
+.Dumby[data-layout='sticky'] {
+  .Showcase {
+    display: block;
+    width: 20vw;
+    height: 40vh;
+
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    background: red;
+  }
+}