>source

저는 지역 비즈니스를 위한 웹페이지를 디자인하고 있습니다. 내가 직면한 문제는 내가 만든 팝업 메뉴가 페이지 여백 밖에 계속 배치된다는 것입니다. 상단 표시줄에서 마지막 항목을 클릭하면 메뉴가 팝업되지만 페이지 여백 내에 있지 않습니다. 문제를 정확하게 재현할 수 있도록 code는 다음과 같습니다.

HTML

<!DOCTYPE html>    <html lang="el">        <head>            <link rel="preconnect" href="https://fonts.googleapis.com">        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected]&amp;
display=swap" rel="stylesheet">        <meta charset="UTF-8">        <meta name="description" content="">        <link rel="stylesheet" href="mystyle.css">        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>    </head>    <body>        <div id="SLIDE_BG">        </div>        <div id="wrapper">            <div id="background">                <div id="menu">                    <ul>                        <li><a href="#">Αρχική</a></li>                        <li><a href="#">Γάμος</a></li>                        <li><a href="#">Βάπτιση</a></li>                        <li><a href="#">Καλλιτεχνική</a></li>                        <li><a href="#">Βίντεο Κλιπ</a></li>                        <li><a href="#" id="social">Επικοινωνία</a></li>                    </ul>                </div>                <script>                    $(document).ready(function(){
                      $("#social").click(function(){
                        $("#social-media-wrapper").toggle(3000);
                      });
                    });
                </script>                <div id="logo-wrapper">                    <div id="logo-area">                        <img src="logo.jpg" id="logo-image">                    </div>                </div>            </div>        </div>        <div id="social-media-wrapper">            <ul id="social-media-container">                <li><a href="https://www.instagram.com/efraimidis_photography/"><p class="fa fa-instagram fa-fw">

</a>&amp; nbsp;&amp; nbsp;</li> <li><a href="https://www.facebook.com/%CE%95%CF%85%CF%86%CF%81%CE%B1%CE%B9%CE%BC%CE%AF%CE%B4%CE%B7%CF%82-photography-2116065648685396"><p class="fa fa-facebook fa-fw">

</a>&amp; nbsp;&amp; nbsp;</li> <li><a href="mailto:[email protected]"><p class="fa fa-envelope fa-fw">

</a></li> <li id="phone-number"> <span>Τηλέφωνο:&amp; nbsp;<a href="tel:2321553290">2321553290</a></span> <span>Κινητό:&amp; nbsp;<a href="tel:6996405521">6996405521</a></span> </li> </ul> </div> </body></html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
}
#SLIDE_BG {
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    animation: slideBg 24s linear infinite 3s;
    animation-timing-function: ease-in-out;
    background-image: url('096.jpg');
  }
  @keyframes slideBg {
    0% {
      background-image: url('096.jpg');
    }
    12.5% {
      background-image: url('227.jpg');
    }
    25% {
      background-image: url('1436.jpg');
    }
    37.5% {
      background-image: url('2158.jpg');
    }
    50% {
      background-image: url('2250.jpg');
    }
    62.5% {
      background-image: url('096.jpg');
    }
    75% {
      background-image: url('227.jpg');
    }
    87.5% {
      background-image: url('1436.jpg');
    }
  }
  #background {
    background-color: black;
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    opacity: 0.8;
}
#menu{
    position: relative;
    float: right;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#menu li{
  float: left;
}
#menu ul{
  list-style-type: none;
}
#menu a {
    color: white;
    padding:16px;
    text-align: center;
    min-width: 200px;
    border-style: none;
    text-decoration: none;
    display: inline-block;
    font-family: 'Roboto Slab', serif;
    font-size: larger;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }
#menu a:hover{
    background-color: rgb(204, 198, 198);
}
#social-media-wrapper{
  top: 60px;
  position: relative;
  display: none;
}
#social-media-container {
  position: absolute;
  font-size: 30px;
  text-align: center;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#social-media-container p {
  text-decoration: none;
  color: rgb(255, 255, 255);
  margin-top: 15px;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#social-media-container p:hover{
  opacity: 0.7;
}
#phone-number
{
  align-self: center;
  text-align: center;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  line-height: 30px;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
}
#phone-number span
{
  margin-top: 40px;
}
#phone-number a
{
  text-decoration: none;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
}
#logo-wrapper{
    width: 200px;
    height: 55px;
    overflow: hidden;
    z-index: 2;
    float: left;
}
#logo-image{
    width: 100%;
    height: auto;
    margin: -42px 0 0 -18px;
}

  • 답변 # 1

    절대 위치 지정요소에 위치 지정 상위 항목이 없으면 문서 본문을 사용하고 페이지 스크롤과 함께 이동합니다.

    '#social-media-wrapper' div를 '#wrapper' div 안에 넣고 position 속성을 'absolute'로 변경합니다. '#소셜 미디어 컨테이너' div의 위치 지정 스타일을 제거합니다. '#wrapper' div, 위치: 상대만들기

    #wrapper {
      position: relative;
    }
    #social-media-wrapper{
      display: none;
      position: absolute;
      top: 60px;
      right: 0;
    }
    

    문서 본문을 기준으로 배치되는 대신 '#wrapper' div를 기준으로 배치됩니다.

    이렇게 하면 일시적으로 문제가 해결됩니다(좋은 방법은 아님). 드롭다운을 사용하여 메뉴/탐색기를 만드는 훨씬 깔끔한 방법이 있습니다(라이브러리를 사용하지 않으려는 경우: https://codepen.io/andornagy/pen/xhiJH)

    $(document).ready(function(){
                          $("#social").click(function(){
                            $("#social-media-wrapper").toggle(500);
                          });
                        });

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        display: flex;
    }
    #SLIDE_BG {
        width: 100%;
        height: 100vh;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        backface-visibility: hidden;
        animation: slideBg 24s linear infinite 3s;
        animation-timing-function: ease-in-out;
        background-image: url('096.jpg');
      }
      @keyframes slideBg {
        0% {
          background-image: url('096.jpg');
        }
        12.5% {
          background-image: url('227.jpg');
        }
        25% {
          background-image: url('1436.jpg');
        }
        37.5% {
          background-image: url('2158.jpg');
        }
        50% {
          background-image: url('2250.jpg');
        }
        62.5% {
          background-image: url('096.jpg');
        }
        75% {
          background-image: url('227.jpg');
        }
        87.5% {
          background-image: url('1436.jpg');
        }
      }
      #background {
        background-color: black;
        height: auto;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        overflow-x: hidden;
        opacity: 0.8;
    }
    #menu{
        position: relative;
        float: right;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
    }
    #menu li{
      float: left;
    }
    #menu ul{
      list-style-type: none;
    }
    #menu a {
        color: white;
        padding:16px;
        text-align: center;
        min-width: 100px;
        border-style: none;
        text-decoration: none;
        display: inline-block;
        font-family: 'Roboto Slab', serif;
        font-size: larger;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
      }
    #menu a:hover{
        background-color: rgb(204, 198, 198);
    }
    #wrapper {
      position: relative;
    }
    #social-media-wrapper{
      top: 60px;
      position: absolute;
      display: none;
      right: 0;
    }
    #social-media-container {
      font-size: 30px;
      text-align: center;
      -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
    }
    #social-media-container p {
      text-decoration: none;
      color: rgb(255, 255, 255);
      margin-top: 15px;
      -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
    }
    #social-media-container p:hover{
      opacity: 0.7;
    }
    #phone-number
    {
      align-self: center;
      text-align: center;
      vertical-align: middle;
      display: flex;
      flex-direction: column;
      line-height: 30px;
      color: white;
      font-family: 'Roboto Slab', serif;
      font-size: 18px;
    }
    #phone-number span
    {
      margin-top: 40px;
    }
    #phone-number a
    {
      text-decoration: none;
      color: white;
      font-family: 'Roboto Slab', serif;
      font-size: 18px;
    }
    #logo-wrapper{
        width: 200px;
        height: 55px;
        overflow: hidden;
        z-index: 2;
        float: left;
    }
    #logo-image{
        width: 100%;
        height: auto;
        margin: -42px 0 0 -18px;
    }

    <!DOCTYPE html>    <html lang="el">        <head>            <link rel="preconnect" href="https://fonts.googleapis.com">        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected]&amp;
    display=swap" rel="stylesheet">        <meta charset="UTF-8">        <meta name="description" content="">        <link rel="stylesheet" href="mystyle.css">        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>    </head>    <body>        <div id="SLIDE_BG">        </div>        <div id="wrapper">            <div id="background">                <div id="menu">                    <ul>                        <li><a href="#">Αρχική</a></li>                        <li><a href="#">Γάμος</a></li>                        <li><a href="#">Βάπτιση</a></li>                        <li><a href="#">Καλλιτεχνική</a></li>                        <li><a href="#">Βίντεο Κλιπ</a></li>                        <li><a href="#" id="social">Επικοινωνία</a></li>                    </ul>                </div>                <div id="logo-wrapper">                    <div id="logo-area">                        <img src="logo.jpg" id="logo-image">                    </div>                </div>            </div>            <div id="social-media-wrapper">            <ul id="social-media-container">                <li><a href="https://www.instagram.com/efraimidis_photography/"><p class="fa fa-instagram fa-fw">

    </a>&amp; nbsp;&amp; nbsp;</li> <li><a href="https://www.facebook.com/%CE%95%CF%85%CF%86%CF%81%CE%B1%CE%B9%CE%BC%CE%AF%CE%B4%CE%B7%CF%82-photography-2116065648685396"><p class="fa fa-facebook fa-fw">

    </a>&amp; nbsp;&amp; nbsp;</li> <li><a href="mailto:[email protected]"><p class="fa fa-envelope fa-fw">

    </a></li> <li id="phone-number"> <span>Τηλέφωνο:&amp; nbsp;<a href="tel:2321553290">2321553290</a></span> <span>Κινητό:&amp; nbsp;<a href="tel:6996405521">6996405521</a></span> </li> </ul> </div> </div> </body></html>

  • 답변 # 2

    작업 code:

    <!DOCTYPE html><html lang="el"><head>  <link rel="preconnect" href="https://fonts.googleapis.com">  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected]&amp;
    display=swap" rel="stylesheet">  <meta charset="UTF-8">  <meta name="description" content="">  <link rel="stylesheet" href="mystyle.css">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><script>  $(document).ready(function () {
        $("#social").click(function () {
          $("#social-media-wrapper").toggle(3000);
        });
      });
    </script><body>  </div>  <div id="wrapper">    <div id="background">      <div id="menu">        <ul>          <li><a href="#">Αρχική</a></li>          <li><a href="#">Γάμος</a></li>          <li><a href="#">Βάπτιση</a></li>          <li><a href="#">Καλλιτεχνική</a></li>          <li><a href="#">Βίντεο Κλιπ</a></li>          <li><a href="#" id="social">Επικοινωνία</a></li>        </ul>      </div>      <div id="logo-wrapper">        <div id="logo-area">          <img src="logo.jpg" id="logo-image">        </div>      </div>    </div>  </div>  <div id="content">    <div id="SLIDE_BG"></div>    <div id="social-media-wrapper">      <ul id="social-media-container">        <li><a href="https://www.instagram.com/efraimidis_photography/">            <p class="fa fa-instagram fa-fw">

    </a>&amp; nbsp;&amp; nbsp;</li> <li><a href="https://www.facebook.com/%CE%95%CF%85%CF%86%CF%81%CE%B1%CE%B9%CE%BC%CE%AF%CE%B4%CE%B7%CF%82-photography-2116065648685396"> <p class="fa fa-facebook fa-fw">

    </a>&amp; nbsp;&amp; nbsp;</li> <li><a href="mailto:[email protected]"> <p class="fa fa-envelope fa-fw">

    </a></li> <li id="phone-number"> <span>Τηλέφωνο:&amp; nbsp;<a href="tel:2321553290">2321553290</a></span> <span>Κινητό:&amp; nbsp;<a href="tel:6996405521">6996405521</a></span> </li> </ul> </div> </div></body></html>

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }
      #content {
        display: flex;
        flex-direction: row;
      }
      #SLIDE_BG {
        width: 100%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        backface-visibility: hidden;
        animation: slideBg 24s linear infinite 3s;
        animation-timing-function: ease-in-out;
        background-image: url('096.jpg');
      }
      @keyframes slideBg {
        0% {
          background-image: url('096.jpg');
        }
        12.5% {
          background-image: url('227.jpg');
        }
        25% {
          background-image: url('1436.jpg');
        }
        37.5% {
          background-image: url('2158.jpg');
        }
        50% {
          background-image: url('2250.jpg');
        }
        62.5% {
          background-image: url('096.jpg');
        }
        75% {
          background-image: url('227.jpg');
        }
        87.5% {
          background-image: url('1436.jpg');
        }
      }
      #background {
        background-color: black;
        height: auto;
        width: 100%;
        z-index: 1;
        top: 0;
        left: 0;
        overflow-x: hidden;
        opacity: 0.8;
        display: flex;
        justify-content: flex-end;
      }
      #menu {
        position: relative;
        float: right;
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
      }
      #menu li {
        float: left;
      }
      #menu ul {
        list-style-type: none;
      }
      #menu a {
        color: white;
        padding: 16px;
        text-align: center;
        min-width: 200px;
        border-style: none;
        text-decoration: none;
        display: inline-block;
        font-family: 'Roboto Slab', serif;
        font-size: larger;
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
      }
      #menu a:hover {
        background-color: rgb(204, 198, 198);
      }
      #social-media-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
      }
      #social-media-container {
        font-size: 30px;
        text-align: center;
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      #social-media-container p {
        text-decoration: none;
        color: rgb(255, 255, 255);
        margin-top: 15px;
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
      }
      #social-media-container p:hover {
        opacity: 0.7;
      }
      #phone-number {
        align-self: center;
        text-align: center;
        vertical-align: middle;
        display: flex;
        flex-direction: column;
        line-height: 30px;
        color: white;
        font-family: 'Roboto Slab', serif;
        font-size: 18px;
      }
      #phone-number span {
        margin-top: 40px;
      }
      #phone-number a {
        text-decoration: none;
        color: white;
        font-family: 'Roboto Slab', serif;
        font-size: 18px;
      }
      #logo-wrapper {
        width: 200px;
        height: 55px;
        overflow: hidden;
        z-index: 2;
        float: left;
      }
      #logo-image {
        width: 100%;
        height: auto;
        margin: -42px 0 0 -18px;
      }
    

    플렉스 박스로 더 많은 작업을 해보세요. 메뉴 표시줄과 실제 콘텐츠가 있도록 세로 레이아웃이 있는 플렉스 상자에 몸을 넣으십시오. 그런 다음 콘텐츠에서 수평 레이아웃이 있는 플렉스 상자를 사용하여 왼쪽에서 오른쪽으로 흐를 수 있도록 합니다.

    절대 사용하지 마십시오맨 위보기에 맞게 항목을 정렬합니다(이 예에서는 메뉴 표시줄의 높이가 60픽셀이기 때문에 60). 플렉스 상자를 정렬하여 서로 잘 맞도록 하십시오. 꼭 필요한 경우에만 위, 아래, 왼쪽, 오른쪽을 사용하십시오. 이러한 제약은 레이아웃을 엉망으로 만들기 쉽습니다.

    또한 요소 높이를 100%로 지정하는 것은 좋은 방법이 아니지만맨 위그 위에. 높이가 예를 들어 1000px라고 생각하기 때문에 항상 레이아웃을 엉망으로 만들지 만 30px의 상단을 추가하므로 이제 1030px이고 스크롤 막대가 추가됩니다.

    제대로 작동하지 않습니다. 몇 가지를 다시 생각하게 해주었지만 귀하의 의견에 감사드립니다.

    kosgian902022-01-27 20:45:13
  • 이전 python : 파이썬에서 낮은 삼각형의 특정 값과 나머지 값이 0인 행렬을 만드는 방법은 무엇입니까?
  • 다음 android : 로컬 데이터에서 PagingDataAdapter와 함께 사용자 정의 PagingSource를 어떻게 올바르게 사용할 수 있습니까?