summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNavan Chauhan <navanchauhan@gmail.com>2024-02-28 11:51:41 -0700
committerNavan Chauhan <navanchauhan@gmail.com>2024-02-28 11:51:41 -0700
commit507d51b356de707b5b8d3e1832fbf3684415f07c (patch)
treedf2483fb0329c75f9f4e2489aa0b0791d3c24555
parent2ede57d571e382f5aae167bd2a059a12fa1108ea (diff)
add example to post
-rw-r--r--Content/posts/2024-02-26-control-element-under-another-element-html-css.md42
-rw-r--r--docs/feed.rss47
-rw-r--r--docs/posts/2024-02-26-control-element-under-another-element-html-css.html43
3 files changed, 130 insertions, 2 deletions
diff --git a/Content/posts/2024-02-26-control-element-under-another-element-html-css.md b/Content/posts/2024-02-26-control-element-under-another-element-html-css.md
index 1c253fe..cbdfe6a 100644
--- a/Content/posts/2024-02-26-control-element-under-another-element-html-css.md
+++ b/Content/posts/2024-02-26-control-element-under-another-element-html-css.md
@@ -33,3 +33,45 @@ In CSS, this can be done by:
}
```
+Let us try this in a simple example.
+
+## Example
+
+Here, we create a button and overlay a transparent box
+
+```html
+<div style="height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;">
+A box with 200px height and 200px width
+</div>
+<button style="z-index: 1; margin-top: 20px; margin-bottom: 200px;" onclick="alert('You were able to click this button')">Try clicking me</button>
+```
+
+<hr>
+
+<div style="height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;">
+A box with 200px height and 300px width
+</div>
+<button style="z-index: 1; margin-top: 20px; margin-bottom: 200px;" onclick="alert('You were able to click this button')">Try clicking me</button>
+<hr>
+
+As you can see, you cannot click the button because the red box comes in the way. We can fix this by adding `pointer-events: none` to the box.
+
+```html
+<div style="height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;">
+A box with 200px height and 300px width
+</div>
+<button style="z-index: 1; margin-top: 20px; margin-bottom: 200px" onclick="alert('You were able to click this button')">Try clicking me</button>
+</div>
+```
+
+<hr>
+
+<div style="height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;">
+A box with 200px height and 300px width
+</div>
+<button style="z-index: 1; margin-top: 20px; margin-bottom: 200px" onclick="alert('You were able to click this button')">Try clicking me</button>
+</div>
+
+
+
+
diff --git a/docs/feed.rss b/docs/feed.rss
index 244ab87..4f92bc6 100644
--- a/docs/feed.rss
+++ b/docs/feed.rss
@@ -4,8 +4,8 @@
<title>Navan's Archive</title>
<description>Rare Tips, Tricks and Posts</description>
<link>https://web.navan.dev/</link><language>en</language>
- <lastBuildDate>Mon, 26 Feb 2024 12:07:42 -0000</lastBuildDate>
- <pubDate>Mon, 26 Feb 2024 12:07:42 -0000</pubDate>
+ <lastBuildDate>Wed, 28 Feb 2024 11:50:15 -0000</lastBuildDate>
+ <pubDate>Wed, 28 Feb 2024 11:50:15 -0000</pubDate>
<ttl>250</ttl>
<atom:link href="https://web.navan.dev/feed.rss" rel="self" type="application/rss+xml"/>
@@ -3588,6 +3588,49 @@ Otherwise, it calls the custom action.</p>
<span class="p">}</span>
</code></pre>
</div>
+
+<p>Let us try this in a simple example.</p>
+
+<h2>Example</h2>
+
+<p>Here, we create a button and overlay a transparent box</p>
+
+<div class="codehilite">
+<pre><span></span><code><span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;&quot;</span><span class="p">&gt;</span>
+A box with 200px height and 200px width
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+<span class="p">&lt;</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;z-index: 1; margin-top: 20px; margin-bottom: 200px;&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;alert(&#39;You were able to click this button&#39;)&quot;</span><span class="p">&gt;</span>Try clicking me<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
+</code></pre>
+</div>
+
+<hr>
+
+<div style="height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;">
+A box with 200px height and 300px width
+</div>
+
+<p><button style="z-index: 1; margin-top: 20px; margin-bottom: 200px;" onclick="alert('You were able to click this button')">Try clicking me</button>
+<hr></p>
+
+<p>As you can see, you cannot click the button because the red box comes in the way. We can fix this by adding <code>pointer-events: none</code> to the box. </p>
+
+<div class="codehilite">
+<pre><span></span><code><span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;&quot;</span><span class="p">&gt;</span>
+A box with 200px height and 300px width
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+<span class="p">&lt;</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;z-index: 1; margin-top: 20px; margin-bottom: 200px&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;alert(&#39;You were able to click this button&#39;)&quot;</span><span class="p">&gt;</span>Try clicking me<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+</code></pre>
+</div>
+
+<hr>
+
+<div style="height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;">
+A box with 200px height and 300px width
+</div>
+
+<p><button style="z-index: 1; margin-top: 20px; margin-bottom: 200px" onclick="alert('You were able to click this button')">Try clicking me</button>
+</div></p>
]]></content:encoded>
</item>
diff --git a/docs/posts/2024-02-26-control-element-under-another-element-html-css.html b/docs/posts/2024-02-26-control-element-under-another-element-html-css.html
index 8b72ac5..b9c9ebc 100644
--- a/docs/posts/2024-02-26-control-element-under-another-element-html-css.html
+++ b/docs/posts/2024-02-26-control-element-under-another-element-html-css.html
@@ -74,6 +74,49 @@
</code></pre>
</div>
+<p>Let us try this in a simple example.</p>
+
+<h2>Example</h2>
+
+<p>Here, we create a button and overlay a transparent box</p>
+
+<div class="codehilite">
+<pre><span></span><code><span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;&quot;</span><span class="p">&gt;</span>
+A box with 200px height and 200px width
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+<span class="p">&lt;</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;z-index: 1; margin-top: 20px; margin-bottom: 200px;&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;alert(&#39;You were able to click this button&#39;)&quot;</span><span class="p">&gt;</span>Try clicking me<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
+</code></pre>
+</div>
+
+<hr>
+
+<div style="height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;">
+A box with 200px height and 300px width
+</div>
+
+<p><button style="z-index: 1; margin-top: 20px; margin-bottom: 200px;" onclick="alert('You were able to click this button')">Try clicking me</button>
+<hr></p>
+
+<p>As you can see, you cannot click the button because the red box comes in the way. We can fix this by adding <code>pointer-events: none</code> to the box. </p>
+
+<div class="codehilite">
+<pre><span></span><code><span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;&quot;</span><span class="p">&gt;</span>
+A box with 200px height and 300px width
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+<span class="p">&lt;</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;z-index: 1; margin-top: 20px; margin-bottom: 200px&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;alert(&#39;You were able to click this button&#39;)&quot;</span><span class="p">&gt;</span>Try clicking me<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+</code></pre>
+</div>
+
+<hr>
+
+<div style="height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;">
+A box with 200px height and 300px width
+</div>
+
+<p><button style="z-index: 1; margin-top: 20px; margin-bottom: 200px" onclick="alert('You were able to click this button')">Try clicking me</button>
+</div></p>
+
<blockquote>If you have scrolled this far, consider subscribing to my mailing list <a href="https://listmonk.navan.dev/subscription/form">here.</a> You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.</blockquote>
<script data-isso="https://comments.navan.dev/"
src="https://comments.navan.dev/js/embed.min.js"></script>