diff options
| -rw-r--r-- | Content/posts/2024-02-26-control-element-under-another-element-html-css.md | 42 | ||||
| -rw-r--r-- | docs/feed.rss | 47 | ||||
| -rw-r--r-- | docs/posts/2024-02-26-control-element-under-another-element-html-css.html | 43 |
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"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;"</span><span class="p">></span> +A box with 200px height and 200px width +<span class="p"></</span><span class="nt">div</span><span class="p">></span> +<span class="p"><</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 1; margin-top: 20px; margin-bottom: 200px;"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"alert('You were able to click this button')"</span><span class="p">></span>Try clicking me<span class="p"></</span><span class="nt">button</span><span class="p">></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"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;"</span><span class="p">></span> +A box with 200px height and 300px width +<span class="p"></</span><span class="nt">div</span><span class="p">></span> +<span class="p"><</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 1; margin-top: 20px; margin-bottom: 200px"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"alert('You were able to click this button')"</span><span class="p">></span>Try clicking me<span class="p"></</span><span class="nt">button</span><span class="p">></span> +<span class="p"></</span><span class="nt">div</span><span class="p">></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"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;"</span><span class="p">></span> +A box with 200px height and 200px width +<span class="p"></</span><span class="nt">div</span><span class="p">></span> +<span class="p"><</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 1; margin-top: 20px; margin-bottom: 200px;"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"alert('You were able to click this button')"</span><span class="p">></span>Try clicking me<span class="p"></</span><span class="nt">button</span><span class="p">></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"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;"</span><span class="p">></span> +A box with 200px height and 300px width +<span class="p"></</span><span class="nt">div</span><span class="p">></span> +<span class="p"><</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 1; margin-top: 20px; margin-bottom: 200px"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"alert('You were able to click this button')"</span><span class="p">></span>Try clicking me<span class="p"></</span><span class="nt">button</span><span class="p">></span> +<span class="p"></</span><span class="nt">div</span><span class="p">></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> |