Css 如何在react组件中设置绝对位置

我正在尝试为我的公文包创建一个自定义按钮

此按钮将设置动画，悬停时顶部从左侧滑入，底部从右侧滑入

它的中心将是链接到此按钮的类别

这里有一个例子：

如何将要创建的每个文本设置在中心？我不能使用“position:absolute”属性，因为引用将是网页，而不是声明自定义组件的位置

这里是我的实际代码：

CSS

JSX

const ButtonCat=（道具）=>(
你好
)

没有执行任何jsx，因此不确定catstyle标记将呈现什么，但是如果您可以只呈现按钮（或div），我将执行以下操作

• 制作一个可弯曲的外部容器（用于在中心对齐文本）
• 制作一个用于文本的内部容器（这样您就可以相对定位文本并向其添加z索引）
• 将伪元素添加到动画位的外部容器中（而不是有两个空div）

*{
框大小：边框框；
}
.按钮{
显示：内嵌flex；/*制作用于居中的flex*/
对齐内容：居中；/*垂直居中*/
对齐项目：居中；/*水平居中*/
位置：相对；/*用于添加绝对位置的子对象*/
最小高度：50px；/*显示文本居中的测试值*/
溢出：隐藏；/*未显示时隐藏伪元素*/
}
.按钮：之前，
.按钮：之后{
内容：“”；/*制作彩色动画位*/
显示：块；
身高：50%；
宽度：100%；
位置：绝对位置；
过渡：所有1都容易进入；
z指数：1；
}
.按钮：之前{
排名：0；
右：100%；
背景：灰色；
}
.按钮：悬停：之前{
右：0；
}
.按钮：之后{
最高：50%；
左：100%；
背景：darkgrey；
}
.按钮：悬停：之后{
左：0；
}
.text{
position:relative；/*需要比psedou元素具有更高的z索引，以便文本显示在顶部*/
z指数：2；
}

---

测试内容

没有完成任何jsx，因此不确定catstyle标记将呈现什么，但是如果您可以只呈现一个按钮（或div），我将执行以下操作

• 制作一个可弯曲的外部容器（用于在中心对齐文本）
• 制作一个用于文本的内部容器（这样您就可以相对定位文本并向其添加z索引）
• 将伪元素添加到动画位的外部容器中（而不是有两个空div）

*{
框大小：边框框；
}
.按钮{
显示：内嵌flex；/*制作用于居中的flex*/
对齐内容：居中；/*垂直居中*/
对齐项目：居中；/*水平居中*/
位置：相对；/*用于添加绝对位置的子对象*/
最小高度：50px；/*显示文本居中的测试值*/
溢出：隐藏；/*未显示时隐藏伪元素*/
}
.按钮：之前，
.按钮：之后{
内容：“”；/*制作彩色动画位*/
显示：块；
身高：50%；
宽度：100%；
位置：绝对位置；
过渡：所有1都容易进入；
z指数：1；
}
.按钮：之前{
排名：0；
右：100%；
背景：灰色；
}
.按钮：悬停：之前{
右：0；
}
.按钮：之后{
最高：50%；
左：100%；
背景：darkgrey；
}
.按钮：悬停：之后{
左：0；
}
.text{
position:relative；/*需要比psedou元素具有更高的z索引，以便文本显示在顶部*/
z指数：2；
}

---

测试内容

您好。如果

CatStyle

是要显示文本的按钮，如果文本始终是一行，您可以只设置CSS属性

行高：50px

，这意味着与

div

CatStyle

的

高度相同。您好。如果
CatStyle
是您想要显示文本的按钮，如果文本总是一行，您只需设置CSS属性
行高：50px
，这意味着与
div
CatStyle
的
高度相同。非常有用，谢谢！不知道绝对位置是相对于第一个“位置：相对”父对象的。而你使用的：before和：after和：hover都很好，再次感谢。作品很有魅力谢谢！不知道绝对位置是相对于第一个“位置：相对”父对象的。您使用的：before和：after with:hover非常好，再次感谢。
  const CatStyle = styled.div`
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.75);
  height: 50px;
  max-width: 150px;
  background-color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  transition : background-color 0.5s ease-out;

:hover div{
  display: flex;
}

.catContent {
  position: relative;
  align-self: center;
  font-size: 1.5rem;
}
.topSlideAnimation {
  display: none
  height: 50%;
  background-color: green;
}
.botSlideAnimation {
  transition : background-color 0.5s ease-out;
  display: none;
  height: 50%;
  background-color: blue;
}

`

const ButtonCat = (props) => (
  <CatStyle>
      <div className="topSlideAnimation"></div>
      <div className="catContent">Hello</div>
      <div className="botSlideAnimation"></div>
  </CatStyle>
)