From 507d51b356de707b5b8d3e1832fbf3684415f07c Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 28 Feb 2024 11:51:41 -0700 Subject: add example to post --- ...ntrol-element-under-another-element-html-css.md | 42 +++++++++++++++++++ docs/feed.rss | 47 +++++++++++++++++++++- ...rol-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 +
+A box with 200px height and 200px width +
+ +``` + +
+ +
+A box with 200px height and 300px width +
+ +
+ +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 +
+A box with 200px height and 300px width +
+ + +``` + +
+ +
+A box with 200px height and 300px width +
+ + + + + + 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 @@ Navan's Archive Rare Tips, Tricks and Posts https://web.navan.dev/en - Mon, 26 Feb 2024 12:07:42 -0000 - Mon, 26 Feb 2024 12:07:42 -0000 + Wed, 28 Feb 2024 11:50:15 -0000 + Wed, 28 Feb 2024 11:50:15 -0000 250 @@ -3588,6 +3588,49 @@ Otherwise, it calls the custom action.

} + +

Let us try this in a simple example.

+ +

Example

+ +

Here, we create a button and overlay a transparent box

+ +
+
<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>
+
+
+ +
+ +
+A box with 200px height and 300px width +
+ +

+

+ +

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.

+ +
+
<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>
+
+
+ +
+ +
+A box with 200px height and 300px width +
+ +

+

]]> 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 @@ +

Let us try this in a simple example.

+ +

Example

+ +

Here, we create a button and overlay a transparent box

+ +
+
<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>
+
+
+ +
+ +
+A box with 200px height and 300px width +
+ +

+

+ +

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.

+ +
+
<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>
+
+
+ +
+ +
+A box with 200px height and 300px width +
+ +

+

+
If you have scrolled this far, consider subscribing to my mailing list here. You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.
-- cgit v1.2.3