css 滚动容器内的绝对定位div仅相对于未滚动位置定位

5jvtdoz2  于 2023-05-02  发布在  其他
关注(0)|答案(1)|浏览(122)

我正在创建一个目录侧边栏，我希望文本在正常情况下被截断，但在悬停时展开以显示列表项的全文。TOC也应该是可滚动的，与主要内容分开（例如：例如，TOC总是可见的，并且“主要”内容自己滚动）。
使用一些 Package 器和position: absolute，我可以使文本弹出TOC容器。然而，如果列表项的祖先元素被滚动，则具有绝对定位的元素显示在该位置中，就好像父元素没有被滚动一样。
我尝试了不同的修改组合，例如在元素或直接父元素上添加top: 0，使任何/所有祖先都是absolute/relative。导致以下结果之一：
1.什么都没变
1.应该弹出的元素不再突出/可见x，而是在正确的位置
1.我想拆分的元素会被放到父容器的顶部。
我使用的是一组嵌套网格，但如果有不同的方法来创建相同的容器，我会考虑它。
下面是一个没有滚动的屏幕截图，它实现了目标：

但是，当滚动元素时，可以看到绝对位置元素似乎没有考虑到父元素的滚动。

参见下面的代码插入。我在li:hover和#testcase上创建了突破效果。
我目前使用title属性作为后备，因为它将始终显示在顶部，但我不能样式或控制时间，所以在正确的位置突破效果仍然会更好。

/**reset.css*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

/** layout.css */

#app {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    'header'
    'content'
    'footer';
}

#content {
  grid-area: content;
  overflow: auto;
}

#content {
  display: grid;
  grid-template-columns: 15vw 1fr;
  grid-template-rows: 1fr; 
  grid-template-rows: 100%; 
  grid-column-gap: 2vw;
}

main {
  max-width: 900px;
  margin-right: 5vw;
}

#toc {

  margin-left: 5px;
  margin-right: 5px;
  align-self: start; 
  height: 100%;

}


#toc{
  display: grid;
  grid-template-rows: auto ;
}

#toc > ul {
  overflow:hidden;
  overflow-y: auto;
  /* height: 100%; */
}


#toc:not(:hover) ul::-webkit-scrollbar{
  visibility: hidden;
}

#toc > ul {

  margin-bottom: 0;
  margin-top:0;

}



#toc h3{
  padding-top: 1em;
  padding-bottom: 1em;
}


header, footer{
  background-color: rgb(241, 248, 255);
}

#toc{
  background-color: rgb(246, 242, 255);
}

#toc ul{
  outline: 1px solid pink;
}

main{
  background-color: rgb(238, 255, 250);
}

/* toc.css */

#toc {
  line-height: 1.3;
}

#toc a::before{
  font-family: 'Noto Emoji', serif;
}

#toc li .toc-item-wrapper {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
  height:1.3em;
}

/* #toc li:has(a[data-indent-section="true"])::before{ */
#toc li .toc-item-wrapper:has(a[data-indent-section="true"])::before{
  content: '↳';
  margin-left: .3em;
  margin-right: .1em;
}

/***/

#toc li:hover .toc-item-wrapper,
.toc-item-wrapper:has(a#testcase) {
  overflow: visible;
}

#toc li:hover a,
a#testcase
 {
  position:absolute;
  overflow: visible;
  outline: 3px solid #000;
  background-color: var(--jelly-25);
  padding-right:.5em;

}

#toc li{
  height:1.3em;
}
<!DOCTYPE html>
<html  lang="en">

<head>
  <title>TEST</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Emoji" type="text/css" media="all" />
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all" />
  <link rel="stylesheet" href="css/layout.css" type="text/css" media="all" />
  <link rel="stylesheet" href="css/toc.css" type="text/css" media="all" />

</head>

<body id="app">
  <header>
    <div>Header, nav, etc.</div>
  </header>
  <div id="content">

    <aside id="toc">
      <h3>Your Progress</h3>
      <ul>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="AAAAAAA">AAAAAAA 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a  href="#"  title="BBBBBBB">BBBBBBB 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#"  data-indent-section="true"  title="CCCCCCC">CCCCCCC 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a id="testcase" href="#" data-indent-section="true" title="DDDDDDD">DDDDDDD 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="EEEEEEE">EEEEEEE 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="FFFFFFF">FFFFFFF 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="GGGGGGG">GGGGGGG 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="HHHHHHH">HHHHHHH 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="IIIIIII">IIIIIII 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="JJJJJJJ">JJJJJJJ 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="KKKKKKK">KKKKKKK 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="LLLLLLL">LLLLLLL 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="MMMMMMM">MMMMMMM 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="NNNNNNN">NNNNNNN 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="OOOOOOO">OOOOOOO 0123456789 0123456789</a>
          </div>
        </li>        

      </ul>
    </aside>
    <main>
      <section>Main Content</section>
      <section>More Content</section>
    </main>
  </div>
  <footer>Site Footer</footer>
</body>

</html>
css

1条答案

按热度按时间
sshcrbum

sshcrbum1#

您可以创建一个自定义工具提示，该工具提示不在带有overflow: auto;的块中，但具有position: fixed;。然后，您需要在onscroll事件之后更改其位置。
也可以使用工具提示库，如Tippy.js：
例如，类似于以下内容：

document.querySelectorAll('.toc-item-wrapper a').forEach(el => {
  tippy(el, {
    content: el.textContent,
    placement: 'top-start',
    arrow: false,
    maxWidth: 'none',
    offset: [0, 0],
    duration: [0, 0],
  });
});
/**reset.css*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

/** layout.css */

#app {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    'header'
    'content'
    'footer';
}

#content {
  grid-area: content;
  overflow: auto;
}

#content {
  display: grid;
  grid-template-columns: 15vw 1fr;
  grid-template-rows: 1fr; 
  grid-template-rows: 100%; 
  grid-column-gap: 2vw;
}

main {
  max-width: 900px;
  margin-right: 5vw;
}

#toc {

  margin-left: 5px;
  margin-right: 5px;
  align-self: start; 
  height: 100%;

}


#toc{
  display: grid;
  grid-template-rows: auto ;
}

#toc > ul {
  overflow:hidden;
  overflow-y: auto;
  /* height: 100%; */
}


#toc:not(:hover) ul::-webkit-scrollbar{
  visibility: hidden;
}

#toc > ul {

  margin-bottom: 0;
  margin-top:0;

}



#toc h3{
  padding-top: 1em;
  padding-bottom: 1em;
}


header, footer{
  background-color: rgb(241, 248, 255);
}

#toc{
  background-color: rgb(246, 242, 255);
}

#toc ul{
  outline: 1px solid pink;
}

main{
  background-color: rgb(238, 255, 250);
}

/* toc.css */

#toc {
  line-height: 1.3;
}

#toc a::before{
  font-family: 'Noto Emoji', serif;
}

#toc li .toc-item-wrapper {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
  height:1.3em;
}

/* #toc li:has(a[data-indent-section="true"])::before{ */
#toc li .toc-item-wrapper:has(a[data-indent-section="true"])::before{
  content: '↳';
  margin-left: .3em;
  margin-right: .1em;
}

/***/

#toc li{
  height:1.3em;
}

#toc li a{
    color:blue;
}

/* tippy */

.tippy-box{
    transform:translateY(100%);
    background:none;
    color:inherit;
    outline: 3px solid #000;
    background-color: var(--jelly-25);
    padding:0;
    font:inherit;
}

.tippy-content{
    padding:0;
    background-color:rgb(246, 242, 255);
    line-height:inherit;
    color:blue;
    text-decoration:underline;
}
<body id="app">
  <header>
    <div>Header, nav, etc.</div>
  </header>
  <div id="content">

    <aside id="toc">
      <h3>Your Progress</h3>
      <ul>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="AAAAAAA">AAAAAAA 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a  href="#"  title="BBBBBBB">BBBBBBB 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#"  data-indent-section="true"  title="CCCCCCC">CCCCCCC 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a id="testcase" href="#" data-indent-section="true" title="DDDDDDD">DDDDDDD 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="EEEEEEE">EEEEEEE 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="FFFFFFF">FFFFFFF 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="GGGGGGG">GGGGGGG 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="HHHHHHH">HHHHHHH 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="IIIIIII">IIIIIII 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="JJJJJJJ">JJJJJJJ 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="KKKKKKK">KKKKKKK 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="LLLLLLL">LLLLLLL 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="MMMMMMM">MMMMMMM 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="NNNNNNN">NNNNNNN 0123456789 0123456789</a>
          </div>
        </li>
        <li>
          <div class="toc-item-wrapper">
            <a href="#" title="OOOOOOO">OOOOOOO 0123456789 0123456789</a>
          </div>
        </li>        

      </ul>
    </aside>
    <main>
      <section>Main Content</section>
      <section>More Content</section>
    </main>
  </div>
  <footer>Site Footer</footer>
</body>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
赞(0）分享  回复(0）举报  2023-05-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com