HTML Grid of widgets placed on top of content without obstructing it

Question

HTML Grid of widgets placed on top of content without obstructing it

This is a complex scenario that requires some patience to explain.

My goal is to create a grid of widgets that can be dynamically displayed and positioned relative to the main page content. These widgets need to interact with the user as well as the content beneath them, allowing for clicking and typing functionality.

The challenge I'm facing is finding a way to place these widgets inside a CSS grid container without obstructing the main content of the page. Despite trying different approaches such as using negative z-index values and adjusting other elements' z-index properties, I have not been successful in achieving the desired outcome.

I have included an image to illustrate the desired result, but I have yet to come up with a viable solution using HTML/CSS.

https://i.sstatic.net/Gb5y8.png

html css css-grid

Answer 1

Answer №1

Why segregate widgets and content into separate containers if they do not visually intersect? It would be more efficient to place them together within the same container, allowing for dynamically displayed and relatively positioned elements.

If maintaining distinct containers is necessary, ensure that both left-side and right-side widgets have their own container, while the content is wrapped in a parent element. Positioning can then be determined using either grid or flex.

Answer 2

Why segregate widgets and content into separate containers if they do not visually intersect? It would be more efficient to place them together within the same container, allowing for dynamically displayed and relatively positioned elements.

If maintaining distinct containers is necessary, ensure that both left-side and right-side widgets have their own container, while the content is wrapped in a parent element. Positioning can then be determined using either grid or flex.

Answer 3

Answer №2

For those interested, @A Haworth provided the correct solution in the comments.

Below is a straightforward code snippet that effectively addresses my issue.

let count = 0;
function updateCount() {
  document.getElementById("display").innerHTML = `Count updated: ${count++}!`;
}

html {
  height: 100vh;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: row;
  background: aqua;
  gap: 1rem;
}

nav {
  text-align: center;
  writing-mode: sideways-lr;
  background: gold;
  padding: 1rem;
}

main {
  flex: 1;
  background: teal;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repear(6, 1fr);
  gap: 1rem;
}

.item {
  background: orange;
  padding: 0.5rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

#item1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

#item2 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 4;
}

#item3 {
  grid-column: 5 / span 2;
  grid-row: 6 / span 1;
}

#item4 {
  grid-column: 6 / span 1;
  grid-row: 1 / span 1;
}

#item5 {
  grid-column: 3 / span 2;
  grid-row: 1 / span 1;
}

<html>
<body>
  <nav>This is the sidebar.</nav>
  <main>
  <div class="content">
    <h3>Content</h3>
    <article>
      <p id="text">Lorem ipsum dolor sit amet.</p>
      <button onclick="updateCount()">Click me!</button>
    </article>
  </div>;

  <div class="wrapper">
    <div id="item1" class="item">Item 1</div>
    <div id="item2" class="item">Item 2 <button>I'm clickable too!</button></div>
    <div id="item3" class="item">Item 3</div>
    <div id="item4" class="item">Item 4</div>
    <div id="item5" class="item">Item 5</div>
  </div>;
  </main>
</body>
</html>

Answer 4

For those interested, @A Haworth provided the correct solution in the comments.

Below is a straightforward code snippet that effectively addresses my issue.

let count = 0;
function updateCount() {
  document.getElementById("display").innerHTML = `Count updated: ${count++}!`;
}

html {
  height: 100vh;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: row;
  background: aqua;
  gap: 1rem;
}

nav {
  text-align: center;
  writing-mode: sideways-lr;
  background: gold;
  padding: 1rem;
}

main {
  flex: 1;
  background: teal;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repear(6, 1fr);
  gap: 1rem;
}

.item {
  background: orange;
  padding: 0.5rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

#item1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

#item2 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 4;
}

#item3 {
  grid-column: 5 / span 2;
  grid-row: 6 / span 1;
}

#item4 {
  grid-column: 6 / span 1;
  grid-row: 1 / span 1;
}

#item5 {
  grid-column: 3 / span 2;
  grid-row: 1 / span 1;
}

<html>
<body>
  <nav>This is the sidebar.</nav>
  <main>
  <div class="content">
    <h3>Content</h3>
    <article>
      <p id="text">Lorem ipsum dolor sit amet.</p>
      <button onclick="updateCount()">Click me!</button>
    </article>
  </div>;

  <div class="wrapper">
    <div id="item1" class="item">Item 1</div>
    <div id="item2" class="item">Item 2 <button>I'm clickable too!</button></div>
    <div id="item3" class="item">Item 3</div>
    <div id="item4" class="item">Item 4</div>
    <div id="item5" class="item">Item 5</div>
  </div>;
  </main>
</body>
</html>

HTML Grid of widgets placed on top of content without obstructing it

Answer №1

Answer №2

Similar questions

Using Angular to pass parameters to a function

Analyzing all the <option> elements within a <select> tag with jQuery

Ways to dynamically adjust the size of a group of images in a limited space without any overflow, scrolling, or the use of media queries?

How to centrally align text in list items using Bootstrap 5

Ways to stop the floating label from blending with the input field

The background color property returns as blank, failing to update on the screen despite my attempt to assign a new value

The confusion between <g:if> and <g:set> features in Grails is causing some issues

What is the best way to save longitude and latitude coordinates in a database using the <input> method?

Styling didn't work on the default selected nav-link in my Vue 3 project using Bootstrap 5

Showing JSON Data in a Div Element

Ways to correct misaligned Bootstrap column grid

Utilizing numerous script elements for three.js library

When the page loads, does the browser automatically download mypic.jpg?

Avoid allowing wysiwyg source code editor to alter the entirety of a website

Move the DIV element to a static section within the DOM

Angular and JS do not have the functionality to toggle the split button

Trimming the div tag from the bottom of the webpage

compressed vertical alignment bootstrap row

Clicking will open the link in both a new tab and the current tab

Generating an HTML table that adjusts its size based on the paper dimensions chosen by the user