Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

CSS: Các vấn đề về lưới, thanh cuộn và chú giải công cụ

In lại Tác giả: Walker 123 更新时间：2023-11-28 19:29:31 33 4
mua khóa gpt4 Nike

我一直在为我将在此处描述的 CSS 问题而烦恼:

在下面的示例 ( https://codesandbox.io/s/jjq4km89y5 ) 中，您可以看到一个可滚动的内容(紫色背景)和一个被左侧面板半隐藏的“工具提示”(出于实际原因，在此示例中始终显示为红色背景) .

我需要的是让紫色内容可滚动，并显示红色工具提示:

screenshot

CSS使用的是CSS Grid，但是如果我改用flex也是一样的问题。

问题似乎出在 overflow: auto 语句上，(代码沙箱中 styles.css 的第 59 行)。

谢谢!!

(要查看实时示例，请转至 https://codesandbox.io/s/jjq4km89y5)

代码，否则，可以在这里看到:


  
Menu

  

    

      
Top Nav

      
Left Panel

      

        

          
Some random content

          

            A div with a Tooltip (always showing here)
            

              You should be able to see the entirety of this text here,
              going over the Left Nav
            

          

          

            Some very long content that should make the purple div scroll


还有 CSS:

.page {
  hiển thị: linh hoạt;
  lề: 0;
  chiều cao: 100%;
  chiều rộng: 100%;
  vị trí: cố định;
}

.menu {
  chiều rộng: 40px;
  background-color: orange;
  chiều cao: 100%;
}

.nội dung {
  uốn cong: 1;
}

.grid {
  hiển thị: lưới;
  grid-template-columns: 210px auto;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "nav nav"
    "panel analysis";
  chiều cao: 100%;
}

.nav {
  grid-area: nav;
  padding: 10px 40px;
  hiển thị: linh hoạt;
  biện minh-nội dung: khoảng cách giữa;
  căn chỉnh các mục: giữa;
  background-color: grey;
  border-bottom: 3px solid black;
}

.panel {
  grid-area: panel;
  border-right: solid 3px black;
  background-color: grey;
}

.panel > div {
  height: calc(100vh - 60px);
}

.Phân tích {
  grid-area: analysis;
  phần đệm: 60px;
  height: calc(100vh - 60px);
  background-color: purple;

  /* The problem is here: 
    if set to "auto", then we have a scrollbar but the red tooltip is not visible
    If set to "visible", we get the red tooltip but the scroll is gone
  */
  tràn: tự động;
}

.tooltip-trigger {
  vị trí: tương đối;
  màu nền: xanh lá cây;
  border: 5px dashed rebeccapurple;
}

.tooltip {
  vị trí: tuyệt đối;
  border: 5px dashed orange;
  màu nền: đỏ;
  chiều cao: 200px;
  chiều rộng: 200px;
  trên cùng: 10px;
  left: -200px;
}

.long-content {
  height: 3000px;
  background-color: pink;
  border: 5px dashed darkred;
}

您还可以看到真实世界的应用程序及其作用:

Real world app

如您所见，工具提示将针对表格中的所有这些单元格显示，并且需要精确地附加到该单元格。

表格所在的内容也需要可滚动。

câu trả lời hay nhất

这可能是一个解决方案，或者只是朝着正确方向的插入。

工具提示不是相对于父元素绝对定位，而是相对于更远的祖先元素，因此它不受紫色 div 溢出的影响。

所以，而不是这个:

.grid {
  hiển thị: lưới;
  grid-template-columns: 210px auto;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "nav nav"
    "panel analysis";
  chiều cao: 100%;
}

.tooltip-trigger {
  vị trí: tương đối;
  màu nền: xanh lá cây;
  border: 5px dashed rebeccapurple;
}

.tooltip {
  vị trí: tuyệt đối;
  border: 5px dashed orange;
  màu nền: đỏ;
  chiều cao: 200px;
  chiều rộng: 200px;
  trên cùng: 10px;
  left: -200px;
}

按照这些思路尝试一些事情:

.grid {
  position: relative; /* new */
  hiển thị: lưới;
  grid-template-columns: 210px auto;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "nav nav"
    "panel analysis";
  chiều cao: 100%;
  vị trí: tương đối;
}

.tooltip-trigger {
  /* vị trí: tương đối;
  màu nền: xanh lá cây;
  border: 5px dashed rebeccapurple;
}

.tooltip {
  vị trí: tuyệt đối;
  border: 5px dashed orange;
  màu nền: đỏ;
  chiều cao: 200px;
  chiều rộng: 200px;
  top: 200px; /* adjusted */
  left: 60px; /* adjusted */
}

revised demo

关于CSS:网格、滚动条和工具提示问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55342532/

33 4 0
Đề xuất bài viết: javascript - jQuery:从 DOM 元素的所有实例中删除 html 标签
Đề xuất bài viết: python - 如何使用 mw 字典添加新字符串列表的分子量？
Đề xuất bài viết: iOS RSA 解密成功但解密数据似乎已损坏
Đề xuất bài viết: javascript - 需要了解一部分 jquery 代码？
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress