연어는 못참아
911
2021-07-31 03:56:37 작성 2021-07-31 03:59:15 수정됨
2
125

vue.js 여러페이지에 네비게이션바가 보이고 겹치려면 어떻게 해야 하나요?ㅠㅠ,


안녕하세요. ㅠㅠ, 아무리 구글링 해도 안나와서 여쭤봅니다.




blue.vue, green.vue....등등 여러 뷰 파일에 모두 동일한 네비바가 보이게 하려고 하는데요.

그림에서 보이는 것처럼 각각의 뷰파일이 맨 상단 (top = 0)자리에서 시작하고

그 위에 네비바가 보이게 하고 싶습니다. 

제가 저 네비바가 있는 header.vue파일을 따로 만들어서 각 페이지마다 그 헤더 파일을 불러와서

보이게 하려고 하는데요. 


App.vue에 아래처럼 줘버리면



<template>

  <div id="app">

    <Header></Header>

    <router-view></router-view> 

    <Footer/>

  </div>

</template>

script>

import Header from './components/common/Header.vue';

import Footer from './components/common/Footer.vue';


export default {

  components:{

  //  ToolBar,

    Header,

    Footer

  },

}

</script>


이렇게 되버립니다. ㅠㅠ 제가 원하는건 top 0인 맨 위까지 전부 blue.vue가 채워지고 

그위에 겹치게 네비바(라우터로 연결된)를 불러오고 싶은데요. 

이것은 어떻게 구현이 가능할까요? ㅠㅠ 하루종일 검색해도 방법을 잘 모르겠습니다. ㅠㅡㅠ

0
  • 답변 2

  • scissors hand
    185
    2021-08-01 12:39:38

    navi bar를 감싸는 div 태그에 position: fixed를 주시면 됩니다.

  • 연어는 못참아
    911
    2021-08-01 14:40:51 작성 2021-08-01 14:43:06 수정됨

     

    scissors hand  엇 알람이 안떠서 답변주신줄 몰랐습니다.
    scissors hand 님 도움 주셔서 감사합니다. : )

    저는 두개를 div로 잡고 하나는 position : absolute( 아래에 들어갈 녀석) /
    position : positive, 그리고 z-index: 높게(위에 뜰 녀석 ) 

    로 해결했습니다.

    하나를 header태그로 잡아버려서 안되었던 거였어요ㅜㅜ.
    div로 고치니 해결되었습니다.






  • 로그인을 하시면 답변을 등록할 수 있습니다.