2017-03-22 1 views
0

내가 기본 HTML과 CSS 코드를 가지고 있기 때문에 스크롤하는 동안 내 탐색 막대가 맨 위에 고정되어 있는지 궁금합니다. 지난 번에 나는 자바 스크립트없이 그렇게 할 수 없었다. https://jsfiddle.net/tw03egpc/스크롤하는 동안 내 탐색 막대가 위로 고정되어 있습니까?

body { 
 
    background-color: black; 
 
} 
 

 
#heder { 
 
    background-color: blue; 
 
    color: aqua; 
 
} 
 

 
#wrap { 
 
    z-index: 1; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
#navWrap { 
 
    height: 30px; 
 
    opacity: 0.7; 
 
    filter: alpha(opacity=80); 
 
} 
 

 
#nav { 
 
    height: 95px; 
 
    padding: 5px; 
 
    background: #999; 
 
} 
 

 
#nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#nav li { 
 
    float: left; 
 
    padding: 3px 8px; 
 
    background-color: grey opacity: 0.5; 
 
    margin: 0; 
 
    color: #f00; 
 
    list-style-type: none; 
 
} 
 

 
#nav li a { 
 
    color: black; 
 
    text-decoration: none; 
 
    margin: 10 px; 
 
    -webkit-transition: 0.2s 0.2s; 
 
} 
 

 
#nav li a:hover { 
 
    color: red; 
 
} 
 

 
br.clearLeft { 
 
    clear: : left; 
 
} 
 

 
#positionli { 
 
    position: absolute; 
 
    top: 70px; 
 
    left: 10pX; 
 
} 
 

 
.image { 
 
    width: 1000px; 
 
    height: 725px; 
 
    opacity: 0.3; 
 
    filter: alpha(opacity=30); 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: ass 1s ease; 
 
    transition: : ass 1s ease; 
 
} 
 

 
.image:hover { 
 
    width: 1100px; 
 
    height: 800px; 
 
    opacity: 0.9; 
 
    filter: alpha(opacity=100); 
 
} 
 

 
.imageframe { 
 
    border: 3px solid #fff; 
 
    width: 1000px; 
 
    height: 725px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    -webkit-box-shadow: 5px 5px 5px 5px #111; 
 
    box-shadow: 5px 5px 5px #111; 
 
} 
 

 
#positionimage { 
 
    position: absolute; 
 
    top: 108px; 
 
    left: 2; 
 
} 
 

 
#div { 
 
    width: 580; 
 
    height: 678; 
 
    overflow: scroll; 
 
    border: 1px solid white; 
 
    padding: 25; 
 
    margin: 25px; 
 
    position: absolute; 
 
    right: 100px; 
 
    top: 84px; 
 
    left: 988px; 
 
} 
 

 
.p { 
 
    color: white; 
 
} 
 

 
#h1 { 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: relative; 
 
    top: 837; 
 
} 
 

 
p { 
 
    width: 700px; 
 
    color: aliceblue; 
 
    padding: 20px; 
 
    margin: 10px; 
 
    position: absolute; 
 
    top: 1100px; 
 
} 
 

 
#h11 { 
 
    color: white; 
 
    position: relative; 
 
    top: 1070; 
 
    margin: 10px; 
 
}
<body> 
 
    <div id="wrap"> 
 
    <div id="header"> 
 
     <div id="navWrap"> 
 
     <div id="nav"> 
 
      <div id="positionli"> 
 
      <ul> 
 
       <li><a href="#"> Demo Link 1</a></li> 
 
       <li><a href="#"> Demo Link 2</a></li> 
 
       <li><a href="#"> Demo Link 3</a></li> 
 
       <li><a href="#"> Demo Link 4</a></li> 
 
      </ul> 
 
      </div> 
 
      <br class="clearLeft" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="positionimage"> 
 
    <div class="imageframe"> 
 
     <img class="image" src="https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg"> 
 
    </div> 
 
    </div> 
 

 
    <div id="div"> 
 
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fposts%2F1250296021672270&width=500" width="500" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 
 

 
    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fvideos%2F1266500823385123%2F&show_text=0&width=400" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" 
 
     allowFullScreen="true"></iframe> 
 
    </div> 
 

 
    <!-- <h1> _____Videos_____ </h1>--> 
 
    <!-- <h1 id="h11"> About us </h1> --> 
 

 
    <p> Infinitiv je troclani sastav nastao u Pozarevcu krajem 2010. koji danas radi i stvara u Beogradu. 2012. su izdali svoj prvi EP pod nazivom ,,Deep inside''. Posle dosta svirki sirom Srbije i ucesca na festivalima i takmicenjima(BDFL 2013, Majska gitarijada 
 
    2012), bend krajem 2013. objavljuje svoj prvi album ''U beskraj'', sa opcijom free download-a preko Nocturne magazine-a. Nakon toga, bend zapocinje koncertnu promociju pesama sa prvog albuma, kao i izradu i promociju pesama koje ce se naci na drugom 
 
    albumu cije je objavljivanje planirano za 2017 godinu. U julu 2016. bend osvaja prvo mesto na Kursumlijskoj gitarijadi 
 
    </p> 
 
    <br/> 
 
</body>

+1

가 그것은'위치의합니다 (은 >>을 플레이 확인) 'CSS – Pugazh

+1

코드를 추가하십시오 int o 질문, 간단히 (클릭 할 수없는) 링크를 놓지 마십시오. –

답변

0

처럼 @Sreenath 이미 말했다 : 여기

사전

감사드립니다 JSFiddle 링크 당신의 #wrap을 위해 : 당신이 '고정 된 위치'를 사용합니다.

이 사용하려고 :

#wrap { 
    z-index: 1; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    left: 0; 
    top:0; 
    width: 100%; 
} 

다른 동작을 원하지 않는 한, 당신이 달성하고자하는 것을 명확하게 언급하는 당신이해야합니다.

2

navposition: fixed#wrap에 정의되어 있기 때문에 막대가 상단에 붙습니다.

position: fixed은 요소를 수정하고 지정된 위치로 자식을 수정합니다.

HTML 위치 지정에 대해 자세히 알고 싶습니다. `당신`#wrap에서, 고정 :

  • https://developer.mozilla.org/en/docs/Web/CSS/position
  • https://www.w3schools.com/cssref/pr_class_position.asp

    body { 
     
        background-color: black; 
     
    } 
     
    
     
    #heder { 
     
        background-color: blue; 
     
        color: aqua; 
     
    } 
     
    
     
    #wrap { 
     
        z-index: 1; 
     
        margin: 0; 
     
        padding: 0; 
     
        /* comment below line "position: fixed;" to get the default behaviour */ 
     
        position: fixed; 
     
        left: 0; 
     
        top: 0; 
     
        width: 100%; 
     
    } 
     
    
     
    #navWrap { 
     
        height: 30px; 
     
        opacity: 0.7; 
     
        filter: alpha(opacity=80); 
     
    } 
     
    
     
    #nav { 
     
        height: 95px; 
     
        padding: 5px; 
     
        background: #999; 
     
    } 
     
    
     
    #nav ul { 
     
        margin: 0; 
     
        padding: 0; 
     
    } 
     
    
     
    #nav li { 
     
        float: left; 
     
        padding: 3px 8px; 
     
        background-color: grey opacity: 0.5; 
     
        margin: 0; 
     
        color: #f00; 
     
        list-style-type: none; 
     
    } 
     
    
     
    #nav li a { 
     
        color: black; 
     
        text-decoration: none; 
     
        margin: 10 px; 
     
        -webkit-transition: 0.2s 0.2s; 
     
    } 
     
    
     
    #nav li a:hover { 
     
        color: red; 
     
    } 
     
    
     
    br.clearLeft { 
     
        clear: : left; 
     
    } 
     
    
     
    #positionli { 
     
        position: absolute; 
     
        top: 70px; 
     
        left: 10pX; 
     
    } 
     
    
     
    .image { 
     
        width: 1000px; 
     
        height: 725px; 
     
        opacity: 0.3; 
     
        filter: alpha(opacity=30); 
     
        -webkit-transition: all 1s ease; 
     
        -moz-transition: all 1s ease; 
     
        -o-transition: all 1s ease; 
     
        -ms-transition: ass 1s ease; 
     
        transition: : ass 1s ease; 
     
    } 
     
    
     
    .image:hover { 
     
        width: 1100px; 
     
        height: 800px; 
     
        opacity: 0.9; 
     
        filter: alpha(opacity=100); 
     
    } 
     
    
     
    .imageframe { 
     
        border: 3px solid #fff; 
     
        width: 1000px; 
     
        height: 725px; 
     
        margin: 0px; 
     
        overflow: hidden; 
     
        -webkit-box-shadow: 5px 5px 5px 5px #111; 
     
        box-shadow: 5px 5px 5px #111; 
     
    } 
     
    
     
    #positionimage { 
     
        position: absolute; 
     
        top: 108px; 
     
        left: 2; 
     
    } 
     
    
     
    #div { 
     
        width: 580; 
     
        height: 678; 
     
        overflow: scroll; 
     
        border: 1px solid white; 
     
        padding: 25; 
     
        margin: 25px; 
     
        position: absolute; 
     
        right: 100px; 
     
        top: 84px; 
     
        left: 988px; 
     
    } 
     
    
     
    .p { 
     
        color: white; 
     
    } 
     
    
     
    #h1 { 
     
        color: white; 
     
        display: flex; 
     
        align-items: center; 
     
        justify-content: center; 
     
        position: relative; 
     
        top: 837; 
     
    } 
     
    
     
    p { 
     
        width: 700px; 
     
        color: aliceblue; 
     
        padding: 20px; 
     
        margin: 10px; 
     
        position: absolute; 
     
        top: 1100px; 
     
    } 
     
    
     
    #h11 { 
     
        color: white; 
     
        position: relative; 
     
        top: 1070; 
     
        margin: 10px; 
     
    }
    <body> 
     
        <div id="wrap"> 
     
        <div id="header"> 
     
         <div id="navWrap"> 
     
         <div id="nav"> 
     
          <div id="positionli"> 
     
          <ul> 
     
           <li><a href="#"> Demo Link 1</a></li> 
     
           <li><a href="#"> Demo Link 2</a></li> 
     
           <li><a href="#"> Demo Link 3</a></li> 
     
           <li><a href="#"> Demo Link 4</a></li> 
     
          </ul> 
     
          </div> 
     
          <br class="clearLeft" /> 
     
         </div> 
     
         </div> 
     
        </div> 
     
        </div> 
     
    
     
        <div id="positionimage"> 
     
        <div class="imageframe"> 
     
         <img class="image" src="https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg"> 
     
        </div> 
     
        </div> 
     
    
     
        <div id="div"> 
     
        <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fposts%2F1250296021672270&width=500" width="500" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 
     
    
     
        <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fvideos%2F1266500823385123%2F&show_text=0&width=400" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" 
     
         allowFullScreen="true"></iframe> 
     
        </div> 
     
    
     
        <!-- <h1> _____Videos_____ </h1>--> 
     
        <!-- <h1 id="h11"> About us </h1> --> 
     
    
     
        <p> Infinitiv je troclani sastav nastao u Pozarevcu krajem 2010. koji danas radi i stvara u Beogradu. 2012. su izdali svoj prvi EP pod nazivom ,,Deep inside''. Posle dosta svirki sirom Srbije i ucesca na festivalima i takmicenjima(BDFL 2013, Majska gitarijada 
     
        2012), bend krajem 2013. objavljuje svoj prvi album ''U beskraj'', sa opcijom free download-a preko Nocturne magazine-a. Nakon toga, bend zapocinje koncertnu promociju pesama sa prvog albuma, kao i izradu i promociju pesama koje ce se naci na drugom 
     
        albumu cije je objavljivanje planirano za 2017 godinu. U julu 2016. bend osvaja prvo mesto na Kursumlijskoj gitarijadi 
     
        </p> 
     
        <br/> 
     
    </body>

  • 관련 문제