Question 42997 in Html Question posted in
Some basic documentation can be found here.

HTML Grid of widgets over content without blocking

This is quite a tough case to explain, so I appreciate your patience.

I want to have a grid of widgets, dynamically displayed and relatively positioned so I could place them dynamically where I want. These widgets will sit in front of the main content of the page. The user should be able to interact with them and the content behind too (click, type, etc).

My problem is that I need for these widgets to sit inside a CSS grid container to achieve my goal, but I don’t want the container to sit in front of the main page content blocking it, which is what happens every time I try to solve this issue. I tried negative z-index for the container, I tried playing with other elements’ z-index, but to no avail.

Here’s an image to demonstrate the result I want. I could not come up with any usable HTML/CSS as of yet sadly.

Rough drawing to explain the idea

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    FWIW, @A Haworth got the answer in the comments section.

    Here's a simple implementation that solves my problem.

    let i = 0;
function clicking() {
  document.getElementById("text").innerHTML = `Text changed: i = ${i++}!`;
}
    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="clicking()">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>


  2. 0

    if widgets and content does not intersect each other visually, and they dont, as I see, why place widgets in its own contianer? place them together with content. such way includes "dynamically displayed and relatively positioned" chances.

    if you still want different containers for content and widgets, both left-side and right-side widgets must have its own container, and with content must be wrapped in parent element, which will determine their positions by grid or flex

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search