如何用绝对位置覆盖父宽度？

Question

我是新的html css，我对通知栏非常困惑，这应该是响应于在移动时采用全屏。但我尝试它不是扩展。

但对我而言，它不起作用

HTML标记

 @import "utils/_reset";
    @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
    @import "utils/_variables";

    body{
      background: #EEEEEE;

    }
    header{
      width: 100%;
      position: fixed;
      height:50px;
      top:0;
      left:0;
      right: 0;
      background: #ffffff;
      box-shadow: 0px 11px 32px -1px rgba(0,0,0,.04);

      .innerwrapper{
        display: flex;
        align-items: center;
        justify-content: center;

        height: 50px;
        width: 75%;
        margin: 0 auto;






      }

      h1{
        color: #393e46;

        font-family: $FontStyle;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 400;
        a{
          padding: 5px;
          border: 1px solid #393e46;
          text-decoration: none;
          color: #393e46;
          font-size: 13px;
          transition: all 100ms ease-in-out;

          &:hover{
            background:#393e46 ;
            color: #ffffff;
          }

        }




      }
      .otherOptions{
        margin-left: auto;
        display: flex;
        align-items: center;






        .profilePicDrop{
          width: 25px;
          height:25px;

          position: relative;
          margin-left: 12px;




          img{
            width: 25px;
            height:25px;

            border-radius: 50px;

          }

          .dropDown{
            width: 150px;
            height:150px;
            background: #ffffff;
            position: absolute;
            right: 5px;
            top:35px;
            border-radius: 5px;
            box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.1);



          }
        }

      }




    }

    .getDisplayNone{
      display: none;
    }

    .getDropMenuIn{

      animation: PopIn;
      animation-duration: 0.3s;

      animation-fill-mode: forwards;




    }
    .getOutDropMenu{
      animation: PopOut;
      animation-duration: .3s;

      animation-fill-mode: forwards;







    }


    .notificationdiv{

      margin-top: 5px;
      position: relative;


      svg{
        width: 30px;
        height:30px;


      }

      .notifyCoun{
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #E74C3C;
        width: 17.5px;

        height:17.5px;
        border-radius: 50px;
        box-shadow: 0px 4px 14px 0px rgba(231,77,60,0.3);

        p{
          font-size: 12px;

          font-family: $FontStyle;
          color: #ffffff;
          font-weight: 300;



        }


      }

      &:hover{
        cursor: pointer;

      }

    }

//this is notification panel css
    .notificationPanel{
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;

      background: #ffffff;
      width: 100%;




    }
    @keyframes PopIn {
      from{
        transform: scale(0.8);
        opacity: 0.5;

      transform-origin: 150px -5px;

      }to{
           transform: scale(1);
           opacity: 1;
           visibility: visible;



         }
    }
    @keyframes PopOut {
      from{

        opacity: 1;




      }to{
           opacity: 0.1;
           visibility: hidden;
           transform: scale(0.5);
           transform-origin: 150px -5px;





         }
    }

Homepage.scss

SELECT-OPTION

Answer 1

尝试从position: relative中删除.notificationdiv。因为你的绝对元素将占用他第一个亲戚的100％。

https://codepen.io/OliviaPaquay/pen/mwbQEj在这里演示，删除第10行。