CSS를 사용하여 머리글 고정

-1

내 웹 사이트의 맨 위에 머리글 수정을 시도하고 있지만 위치는 고정되어 있습니다. 헤더가 왼쪽으로 이동하고 나머지 페이지 컨텐츠가 올라옵니다. 나는 Z- 인덱스를 시도하고 여전히 왼쪽에있는 패딩 (padding) 헤더는 아무도 솔루션을 찾는 데 도움을 줄 수 없다.CSS를 사용하여 머리글 고정

감사

<body> 
<div class="header_area "> 
<div class=" header "> 
<div class="logo floatleft"> 
<img src="images/2016.png" alt="logo" width='100%' align="middle" style="border:5px solid white"/> 
</div> 
<div class="mainmenu floatright "> 
<nav class="main-navigation pull-right hidden-xs hidden-sm"> 
(now some list there)

.header_area{} 
.header 
{ 
    position: fixed; 
    z-index:1000; 
    padding: 10px 0; 
    margin: 0 auto; 
    transition: all 1.3s ease 0s; 
    -moz-transition: all 1.3s ease 0s; 
    -webkit-transition: all 1.3s ease 0s; 
    -o-transition: all 1.3s ease 0s; 
    -ms-transition: all 1.3s ease 0s; 

} 
body{ 
    padding: 20px 10px; 
    font-family: sans-serif, open-sans; 
    font-size:14px;line-height:20px;color:#414141; 
} 
nav.main-navigation { 
    position: relative; 
    z-index: 9999; 
    font-family: bebasregular; 
}

출처

2016-07-23 niharika Singhal

: 마진에서-상단과 상단 여백-에서 특정 위치 – Vaibhav

시도는 추가 :

position: fixed; 
top:0; left:0; right:0;

출처

2016-07-23 20:08:09 Arthur

안녕을 얻을 수 속성, 그것은 바로 이곳에 헤더를 이동하지만 페이지의 콘텐츠는 상단에 아직도있다. –

콘텐츠 태그에'margin-top : {header-height} px'를 추가하십시오. – Arthur

감사합니다. –

-1

이

<div class="header_area "> 
<div class=" header "> 
<div class="logo floatleft"> 
<img src="images/2016.png" alt="logo" width='100%' align="middle" style="border:5px solid white"/> 
</div> 
<div class="mainmenu floatright "> 
<nav class="main-navigation pull-right hidden-xs hidden-sm"> 
</nav> 
    </div> 
    </div>

시도 시도

.header_area{ 
height:400px; 
} 
.header 
{ 
    position: fixed; 
    z-index:1000; 
    padding: 10px 0; 
    background-color:red; 
    top:0px; 
    left:0px; 
    width:100%; 
    margin: 0 auto; 
    transition: all 1.3s ease 0s; 
    -moz-transition: all 1.3s ease 0s; 
    -webkit-transition: all 1.3s ease 0s; 
    -o-transition: all 1.3s ease 0s; 
    -ms-transition: all 1.3s ease 0s; 

} 
body{ 
    padding: 20px 10px; 
    font-family: sans-serif, open-sans; 
    font-size:14px;line-height:20px;color:#414141; 
} 
nav.main-navigation { 
    position: relative; 
    z-index: 9999; 
    font-family: bebasregular; 
}

출처

2016-07-23 20:12:21

CSS를 사용하여 머리글 고정

답변

관련 문제