html 是否有任何CSS解决方案的位置粘滞和溢出的父元素？

ccgok5k5 于 11个月前发布在其他

关注(0)|答案(1)|浏览(91)

我正在努力解决一个问题，如果我在父元素上将溢出属性设置为auto，则无法使用粘性位置。我尝试了很多方法，比如为sticky属性的元素添加一个额外的 Package 器，使用clip而不是auto，但这些都没有帮助。我找到了一个应用了一些js脚本的解决方案，但如果可能的话，我宁愿使用纯CSS。

<div className="wrapper">
      <div className="left">
        <div className="header" />
      </div>
      <div className="right">
        <div className="header">Blablabla blablabla blabla</div>
        <div className="table"/>
      </div>
    </div>

和css：

.wrapper {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 200px auto;
  width: 100%;
  max-height: 30vh;
  overflow-y: auto;
  position: relative;
}

.left {
  background-color: chocolate;
}

.right {
  background-color: chartreuse;
  height: 50vh;
  overflow-x: auto;
  position: relative;
}

.header {
  height: 20px;
  width: 100%;
  background-color: black;
  position: sticky;
  top: 0;
  color: white;
}

.table {
  width: 2000px;
}

我创建了一个小例子来玩：https://stackblitz.com/edit/react-starter-typescript-yrmmde
我想实现的是有正确的标题粘性，以及但正确的容器应在X轴上滚动在同一时间

Html

来源：https://stackoverflow.com/questions/77124832/is-there-any-css-workaround-for-position-sticky-and-overflow-of-parent-element

1条答案

按热度按时间

s71maibg1#

import React from 'react';
import { ButtonCounter } from './components/ButtonCounter';

export const App = () => {
  return (
    <div className="wrapper">
      <div className="left">
        <div className="header" />
      </div>
      <div>
        <div className="header">Blablabla blablabla blabla</div>
        <div className="right"></div>
        <div className="table" />
      </div>
    </div>
  );
};

.wrapper {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 200px auto;
  width: 100%;
  max-height: 30vh;
  overflow-y: auto;
  position: relative;
}

.left {
  background-color: chocolate;
}

.right {
  background-color: chartreuse;
  height: 50vh;
  overflow-x: auto;
  position: relative;
  z-index: 1;
}

.header {
  height: 20px;
  width: 100%;
  background-color: black;
  position: sticky;
  top: 0px;
  color: white;
  z-index: 2;
}

.table {
  width: 2000px;
}

你把你的头放在右边的div里面。我把它从里面移走，并根据它们的优先级给它们z-index。希望这就是你正在寻找的解决方案。

赞(0）回复(0）举报 11个月前

我来回答

html 是否有任何CSS解决方案的位置粘滞和溢出的父元素？

1条答案

相关问题

热门标签

最新问答