CODEWITHSUNDEEP
javascripthtmlcssreactjs
Jpark9061
Jpark9061

Reputation: 1070

CSS child component's border on top of parent component's border

How do I make a child component's border go on top (higher z-index) of its parent component's border? Z-index didn't work for me.

Wanted behavior: clicking on the tab enables green border-bottom to show that the tab is clicked. This green border overlaps on top of the default gray border that is set throughout all the tabs.

https://codesandbox.io/s/navbar-component-d5f1c?file=/Navbar.js

import React, { useState } from 'react';
import styled from "styled-components";

const Navbar = ({ value, children, tabFilter, contentFilter }) => {
  const [activeTab, setActiveTab] = useState(value[0].title);

  const onClickTabItem = tab => {
    setActiveTab(tab);
  }

  return (
    <React.Fragment>
      <NavbarOutline id="main">
        <ol>
          {value.map(child => {
            const { title } = child;
            return <Tab activeTab={activeTab} key={title} title={title} handleClick={onClickTabItem} />;
          })}
        </ol>
      </NavbarOutline>
      <div>
        {value.map(child => {
          if (child.title !== activeTab) return undefined;
          return <StyledTabs className="content">{child.title}</StyledTabs>
        })}
      </div>
    </React.Fragment>
  );
}

const Tab = props => {
  const { activeTab, title, handleClick } = props;
  let className = 'not-active';

  const onClick = () => {
    handleClick(title);
  };

  if (activeTab === title) {
    className = 'active';
  }

  return (
    <StyledTabs className={className} onClick={onClick}>
      {title}
    </StyledTabs>
  );
};

// eslint-disable-next-line import/prefer-default-export
export const NavbarOutline = styled.div`
  margin-left: 35px;
  margin-right: 35px;
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 2px solid #e3e3e3;
  top: 0px;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
`;

const StyledTabs = styled.button.attrs(props => ({
  className: props.className
}))`
  &.not-active {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    padding: 16px 31px 16px 31px;
    background: none;
    border: none;
    position: relative;
    bottom: -29px;
  }
  &.active {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    position: relative;
    bottom: -29px;
    z-index: 3;
    background: none;
    color: #2b8000;
    border: none;
    border-bottom: 3px solid #2b8000;
  }
  &.content {
    background: none;
    border: none;
  }
`;

Upvotes: 0

Views: 824

Answers (1)

Jakub Svihla
Jakub Svihla

Reputation: 36

The parent div with id="main" has overflow-x: auto, which is causing your child tab element to disappear when it goes outside of it. It's probably what you want, but that's why you can't see the green border.

Open the devtools and untick overflow-x: auto to see for yourself.

Upvotes: 1

Related Questions