CSS 子组件的边框在父组件的边框之上

Question

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

Answer 1

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.