英文:
HTML Grid of widgets over content without blocking
问题
这是一个相当复杂的情况要解释，所以我感谢您的耐心。
我想要一个小部件的网格，动态显示并相对定位，以便我可以将它们动态放置在我想要的位置。这些小部件将显示在页面的主要内容前面。用户应该能够与它们以及背后的内容互动（单击、输入等）。
我的问题是，我需要这些小部件放在一个CSS“grid”容器内以实现我的目标，但我不希望容器挡住主页面内容，这是每次我尝试解决这个问题时发生的情况。我尝试了为容器使用负“z-index”，尝试调整其他元素的“z-index”，但都无济于事。
这里有一张图片来演示我想要的结果。可惜我目前还没有想出可用的HTML/CSS。
英文:
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.
答案1
得分: 1
如果小部件和内容在视觉上不相交，而它们确实不相交，就像我所看到的那样，为什么要将小部件放在它自己的容器中？将它们与内容放在一起。这种方式包括 "动态显示和相对定位" 的机会。
如果你仍然希望为内容和小部件使用不同的容器，那么左侧和右侧的小部件都必须有自己的容器，而内容必须包裹在父元素中，该父元素将通过 grid 或 flex 确定它们的位置。
英文:
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
答案2
得分: 1
以下是已翻译好的内容：
FWIW，@A Haworth 在评论部分找到了答案。
这是一个解决我的问题的简单实现。
let i = 0;
function clicking() {
document.getElementById("text").innerHTML = `文本已更改：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: repeat(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>这是侧边栏。</nav>
<main>
<div class="content">
<h3>内容</h3>
<article>
<p id="text">Lorem ipsum dolor sit amet.</p>
<button onclick="clicking()">点击我！</button>
</article>
</div>
<div class="wrapper">
<div id="item1" class="item">项目1</div>
<div id="item2" class="item">项目2 <button>我也可以点击！</button></div>
<div id="item3" class="item">项目3</div>
<div id="item4" class="item">项目4</div>
<div id="item5" class="item">项目5</div>
</div>
</main>
</body>
</html>
英文:
FWIW, @A Haworth got the answer in the comments section.
Here's a simple implementation that solves my problem.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
let i = 0;
function clicking() {
document.getElementById("text").innerHTML = `Text changed: i = ${i++}!`;
}
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论