How to set absolute positionning in react component

Question

i'm trying to create a custom button for my portfolio.

This button will be animated, the top part sliding in from left and the bottom part sliding in from right when hovered.

At the center of it will be the Category linked to this button.

Here an illustration :

How can i set my text in the center for every that i will create ? I can't use "position: absolute" property cause the reference would be the webpage and not the position where the custom component is declared...

Here my actual code :

CSS

  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;
}

`

JSX

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

Hello. In case CatStyle is the button in which you want to show the text, and in case the text is always one line, you can just set the CSS property line-height: 50px, meaning the same as the height of the div CatStyle. — Jolly
– Jolly, Commented Mar 20, 2019 at 14:54

Pete · Accepted Answer · 2019-03-20 14:59:28Z

4

Not done any jsx so not sure what your catstyle tag would render, but if you can just render a button (or div), I would do the following

Make an outer container that is flex (for aligning text in center)
Make an inner container that is for the text (so you can position it relatively and add a z-index to it)
Add pseudo elements to your outer container for the animated bits (rather than having 2 empty divs)

* {
  box-sizing: border-box;
}

.button {
  display: inline-flex;    /* make flex for centring */
  justify-content: center; /* vertically centre */
  align-items: center;     /* horizontally centre */
  position: relative;      /* for adding absolute positioned children */
  min-height: 50px;         /* test value to show text is centred */
  overflow: hidden;        /* hide pseudo elements when not shown */
}

.button:before,
.button:after {
  content: '';             /* make coloured animatable bits */
  display: block;
  height: 50%;
  width: 100%;
  position: absolute;
  transition: all 1s ease-in;
  z-index: 1;
}

.button:before {
  top: 0;
  right: 100%;
  background: grey;
}

.button:hover:before {
  right: 0;
}

.button:after {
  top: 50%;
  left: 100%;
  background: darkgrey;
}

.button:hover:after {
  left: 0;
}

.text { 
  position: relative;  /* needs to have a higher z-index than the pseduo elements so text  appears on top */
  z-index: 2;
}

<button class="button"><span class="text">test content</span></button>

edited Mar 20, 2019 at 14:59

answered Mar 20, 2019 at 14:53

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Julien FEGER Over a year ago

Works like a charm thank you ! Didn't know the absolute position was relative the the first "position: relative" parent. And your use of :before and :after with the :hover is quite good, thanks again.

Collectives™ on Stack Overflow

How to set absolute positionning in react component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related