0

Tengo mi hamburguer menu, puesto que está creado en mobile first, el z-index es mayor a los elementos donde empieza la imagen más grande con la superposición de otros elementos, el punto es que a pesar de que el menú tenga mayor z-index, la imagen grande y la superposición que le sigue se muestran por detrás de toda la página pero el texto de la superposición ya no es seleccionable como la parte que dice Moden Interior donde el cursor se muestra para seleccionar texto.

mostrarNav = () => {
    document.getElementsByClassName('header__navigation__hamburguer')[0].classList.toggle('active');
};
/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200&family=Lora:wght@500;700&family=Montserrat:wght@400;500;700&display=swap');
/* VARIABLES */
/* FUNCTIONS*/
/* GLOBAL RESETS */
* {
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

html {
    font-size : 62.5%;
}

body {
    background-color : #181719;
}

a {
    text-decoration : none;
}

ul {
    list-style : none;
}

/* HEADING STYLES */
h1 {
    color       : #FFFFFF;
    font-family : 'Crimson Pro', serif;
    font-size   : 1.4rem;
    font-weight : 200;
}

h2 {
    color       : #FFFFFF;
    font-family : 'Lora', serif;
    font-size   : 3.6rem;
    font-weight : 500;
}

h3 {
    color       : #FFFFFF;
    font-family : 'Montserrat', sans-serif;
    font-size   : 1.2rem;
    font-weight : 500;
}

h4 {
    color       : #FFFFFF;
    font-family : 'Lora', serif;
    font-size   : 1.8rem;
    font-weight : 700;
}

h5 {
    color       : #A9A9A9;
    font-family : 'Montserrat', sans-serif;
    font-size   : 1.4rem;
    font-weight : 500;
}

p {
    color       : #FFFFFF;
    font-family : 'Montserrat', sans-serif;
    font-size   : 1.4rem;
    font-weight : 400;
}

.container {
    margin    : 0 auto;
    max-width : 37.5rem;
    width     : 90%;
}

/* HEADER */
/*.header {
  padding-top : 1.9rem;

  &__container {

  }

  &__menu__container {
    align-items     : center;
    display         : flex;
    justify-content : space-between;
    position        : relative;

    & h1 {
      border         : 1px solid $white;
      padding        : .8rem;
      text-transform : uppercase;
    }
  }

  &__hamburguer {
    position         : fixed;
    top              : -9px;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : $background;
    cursor           : pointer;
    z-index          : 200;
    clip-path        : circle(25px at calc(100% - 45px) 45px);
    transition       : all 300ms ease-in-out;

    &.active {
      clip-path : circle(75%);
    }

    &__button {
      position : absolute;
      top      : 2rem;
      right    : 2rem;
      width    : 5rem;
      height   : 5rem;
      cursor   : pointer;

      & span {
        background-color : $white;
        position         : absolute;
        left             : 50%;
        transform        : translate(-50%, -50%);
        width            : 50%;
        height           : .2rem;
        transition       : all 200ms ease-in-out;

        &:nth-child(1) {
          top : 30%;
        }

        &:nth-child(2) {
          top : 50%;
        }

        &:nth-child(3) {
          top : 70%;
        }
      }

    }

    &-links {
      text-align : center;
      position   : absolute;
      top        : 50%;
      left       : 50%;
      transform  : translate(-50%, -50%);
    }

    & a {
      @include heading-styles($white, $montserrat, 1.8rem, 500);
      border-bottom  : 2px solid transparent;
      padding-bottom : .6rem;

      &:hover {
        @include heading-styles($white, $montserrat, 1.8rem, 700);
        transition     : all 300ms ease-in-out;
        border-bottom  : 2px solid white;
        padding-bottom : .6rem;
      }
    }

    &-link {
      margin-bottom : 3.2rem;
    }
  }
}

.header__hamburguer.active .header__hamburguer__button span:nth-child(1) {
  top       : 50%;
  transform : translate(-50%, -50%) rotate(45deg);
}

.header__hamburguer.active .header__hamburguer__button span:nth-child(2) {
  opacity : 0;
}

.header__hamburguer.active .header__hamburguer__button span:nth-child(3) {
  top       : 50%;
  transform : translate(-50%, -50%) rotate(-45deg);
}*/
/* HEADER */
.header {
    margin-bottom : 3.8rem;
    padding-top   : 1.9rem;
}

.header__menu__container {
    align-items     : center;
    justify-content : space-between;
    display         : flex;
}

.header__menu__container h1 {
    border         : 1px solid #FFFFFF;
    padding        : 0.8rem;
    text-transform : uppercase;
}

.header__navigation__hamburguer {
    align-items : center;
    cursor      : pointer;
    display     : flex;
    position    : relative;
    z-index     : 2;
}

.header__navigation__hamburguer span {
    background-color : #FFFFFF;
    display          : block;
    height           : 0.3rem;
    margin-bottom    : 0.3rem;
    position         : relative;
    transition       : all 0.5s ease-in-out;
    width            : 3rem;
    z-index          : 1;
}

.header__navigation__hamburguer__menu {
    background-color : #181719;
    clip-path        : circle(40px at calc(50% + (37.5rem / 2) - (40px / 2)) calc(0% + 1.9rem + (40px / 2)));
    height           : 100%;
    left             : 0;
    opacity          : 0;
    position         : absolute;
    top              : 0;
    transition       : all 0.5s ease-in-out;
    visibility       : hidden;
    width            : 100%;
}

.header__navigation__hamburguer.active + .header__navigation__hamburguer__menu {
    clip-path  : circle(100%);
    opacity    : 1;
    visibility : visible;
}

.header__navigation__hamburguer__menu__links {
    position   : absolute;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, -50%);
    text-align : center;
}

.header__navigation__hamburguer__menu__link {
    margin-bottom : 2rem;
}

.header__navigation__hamburguer__menu__link a {
    color          : #FFFFFF;
    font-family    : 'Montserrat', sans-serif;
    font-size      : 1.8rem;
    font-weight    : 500;
    border-bottom  : 2px solid transparent;
    color          : #FFFFFF;
    padding-bottom : 0.6rem;
}

.header__navigation__hamburguer__menu__link a:hover {
    color          : #FFFFFF;
    font-family    : 'Montserrat', sans-serif;
    font-size      : 1.8rem;
    font-weight    : 700;
    border-bottom  : 2px solid white;
    padding-bottom : 0.6rem;
    transition     : all 300ms ease-in-out;
}

.line {
    fill         : none;
    stroke       : #FFFFFF;
    stroke-width : 6;
    transition   : stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
    stroke-dasharray : 60 207;
    stroke-width     : 6;
}

.line2 {
    stroke-dasharray : 60 60;
    stroke-width     : 6;
}

.line3 {
    stroke-dasharray : 60 207;
    stroke-width     : 6;
}

.active .line1 {
    stroke-dasharray  : 90 207;
    stroke-dashoffset : -134;
    stroke-width      : 6;
}

.active .line2 {
    stroke-dasharray  : 1 60;
    stroke-dashoffset : -30;
    stroke-width      : 6;
}

.active .line3 {
    stroke-dasharray  : 90 207;
    stroke-dashoffset : -134;
    stroke-width      : 6;
}

/* MAIN */
.main__information__details {
    margin-bottom : 2.5rem;
}

.main__information__details h2 {
    margin-bottom : 2.5rem;
}

.main__information__details p {
    margin-bottom : 2.5rem;
    max-width     : 25rem;
}

.main__information__details__button {
    display : inline-block;
}

.main__information__details__button a {
    color       : #FFFFFF;
    font-family : 'Montserrat', sans-serif;
    font-size   : 1.4rem;
    font-weight : 700;
    align-items : center;
    display     : flex;
}

.main__information__details__button a span {
    margin-left : 1.5rem;
}

.main__information__product {
    display               : grid;
    position              : relative;
    grid-template-columns : repeat(13, 1fr);
    z-index               : -1;
}

.main__information__product__image {
    grid-column : 1/-1;
    grid-row    : 1;
}

.main__information__product__image img {
    width : 100%;
}

.main__information__product__box {
    margin-top  : -20%;
    box-shadow  : 0px 4px 4px rgba(0, 0, 0, 0.25);
    background  : #181719;
    width       : 100%;
    grid-column : 3/13;
    padding     : 1.317rem 0 2.5rem 1.9rem;
}

.main__information__product__person {
    align-items   : center;
    display       : flex;
    margin-bottom : 1.824rem;
}

.main__information__product__person img {
    height        : 3.6rem;
    width         : 3.6rem;
    border-radius : 50%;
    margin-right  : 1.39rem;
}

.main__information__product__person__details h3 {
    margin-bottom : 0.585rem;
}

.main__information__product__person__details p {
    color       : #828282;
    font-family : 'Montserrat', sans-serif;
    font-size   : 1rem;
    font-weight : 500;
}

.main__information__product h4 {
    max-width : 21rem;
    width     : 100%;
}
<!doctype html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible"
              content="ie=edge">
        <title>Interior Consultant</title>
        <link rel="shortcut icon"
              href="devchallenges.png"
              type="image/x-icon">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
              rel="stylesheet">
        <link rel="stylesheet"
              href="styles/styles.css">
    </head>
    
    <body>
        
        <!--<header class="header">
            <div class="header__container container">
                <div class="header__menu__container">
                    <h1>This Interior</h1>
                    <div class="header__hamburguer"
                         onclick="mostrarNav()">
                        <div class="header__hamburguer__button">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <nav>
                            <ul class="header__hamburguer-links">
                                <li class="header__hamburguer-link">
                                    <a href="#">Home</a>
                                </li>
                                <li class="header__hamburguer-link">
                                    <a href="#">Collection</a>
                                </li>
                                <li class="header__hamburguer-link">
                                    <a href="#">About</a>
                                </li>
                                <li class="header__hamburguer-link">
                                    <a href="#">Contact</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        
        </header>-->
        <header class="header">
            <div class="header__container container">
                <div class="header__menu__container">
                    <h1>This Interior</h1>
                    <div class="header__navigation">
                        <div class="header__navigation__hamburguer "
                             onclick="mostrarNav()">
                            <svg width="40"
                                 height="40"
                                 viewBox="0 0 100 100">
                                <path class="line line1"
                                      d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"/>
                                <path class="line line2"
                                      d="M 20,50 H 80"/>
                                <path class="line line3"
                                      d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"/>
                            </svg>
                        </div>
                        <nav class="header__navigation__hamburguer__menu">
                            <ul class="header__navigation__hamburguer__menu__links">
                                <li class="header__navigation__hamburguer__menu__link">
                                    <a class="link-social"
                                       href="#">Home</a>
                                </li>
                                <li class="header__navigation__hamburguer__menu__link">
                                    <a class="link-social"
                                       href="#">Collection</a>
                                </li>
                                <li class="header__navigation__hamburguer__menu__link">
                                    <a class="link-social"
                                       href="#">About</a>
                                </li>
                                <li class="header__navigation__hamburguer__menu__link">
                                    <a class="link-social"
                                       href="#">Contact</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
        <main class="main">
            <div class="main__information container">
                <div class="main__information__details">
                    <h2>Modern Interior</h2>
                    <p>A full-Service residential & commercial interior design and staging company offering professional
                       organizing & eco-services.</p>
                    <div class="main__information__details__button">
                        <a href="#">Read more <span class="material-icons">trending_flat</span></a>
                    </div>
                </div>
                <div class="main__information__product">
                    <figure class="main__information__product__image">
                        <img src="https://picsum.photos/1474/1100"
                             alt="">
                    </figure>
                    <div class="main__information__product__box">
                        <div class="main__information__product__person">
                            <img src="https://picsum.photos/36/36"
                                 alt="">
                            <div class="main__information__product__person__details">
                                <h3>Aliza Webber</h3>
                                <p>Interior designer</p>
                            </div>
                        </div>
                        <h4>Designed in 2020 by Aliza Webber</h4>
                    </div>
                </div>
            </div>
        </main>
        <script src="index.js"></script>
    </body>

</html>

1 respuesta 1

1

Lo solucioné eliminando el position: relative; del contenedor principal donde se encuentran las imágenes con las superposiciones.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.