강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

황재중님의 프로필 이미지
황재중

작성한 질문수

반응형 웹사이트 포트폴리오(App Official Landing Website)

Header & Welcome 섹션 HTML 기본구조

header position: fixed 가 안됩니다.

작성

·

258

1

안녕하세요 선생님 공부를 하다가 보니 헤더부분 gnb가 

position: fixed; 가 안됩니다.

header부분이 계속 따라오는 거 같아 말씀드려봤습니다.

<!--Custom CSS & JS-->
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="reponsive.css">
  <script src="js/costom.js"></script>
</head>

<body>
  <div class="container">
    <!--##########Header##########-->
    <header>
      <div class="header-inner">
        <div class="logo">
          <a href="#none"><img src="images/logo.png"></a>
        </div>
        <div class="gnb">
          <a href="#none">CEO 인사말</a>
          <a href="#none">서비스 특징</a>
          <a href="#none">자주 묻는 질문들</a>
          <a href="#none">경영비전</a>
          <a href="#none">사용자 리뷰</a>
          <a href="#none">앱 사용자 가이드</a>
          <a href="#none">최신소식</a>
        </div>
      </div>
    </header>
/* ################## header ##################### */
header {
  position: fixed;
  width: 100%;
  z-index: 10;
}
.header-inner {
  width: 1300px;
  margin: auto;
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 15px;
}
.logo {
  float: left;
}
.logo img {
  margin-top: -7px;
}
.gnb {
  float: right;
}
.gnb a {
  margin: 10px;
  font-size: 16px;
}

답변 1

0

화면 캡쳐로 보니까 header가 fixed가 잘되고 있는 것 같은데요.

혹시 모르니 header에 top: 0; left: 0; 를 줘보세요.

현재 CSS에는 이 부분에 문제는 없는 것 같습니다.

황재중님의 프로필 이미지
황재중

작성한 질문수

질문하기