절대 사이드 바 또는 고정 바닥 글

Question

이 코딩을 사용하면 내 사이드 ​​바가 내 바닥 글과 겹치고 텍스트가 숨겨집니다. 바닥 글을 내리고 있어야합니다. 사이드 바 CSS에서 절대 위치를 제거하려고 시도했지만 아무 소용이 없습니다. 꼬리말 둘 모두를 지우는 것은 아무 것도하지 않습니다. 누구나 왜 그런 생각이 들지?

/* -------------------------------- 
 

 
Sidebar 
 

 
-------------------------------- */ 
 
.cd-side-nav { 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    padding: 45px 0 0; 
 
    background-color: #2c3136; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    min-height: 100vh; 
 
    overflow: hidden; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s; 
 
    -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s; 
 
    transition: opacity 0.2s 0s, visibility 0s 0.2s; 
 
} 
 

 

 
@media only screen and (min-width: 768px) { 
 
    .cd-side-nav { 
 
    position: absolute; 
 
    float: left; 
 
    top: auto; 
 
    width: 110px; 
 
    max-height: 100vh; 
 
    padding-top: 55px; 
 
    /* reset style */ 
 
    visibility: visible; 
 
    opacity: 1; 
 
    overflow: visible; 
 
    
 

 
    } 
 
    
 
    
 
    .footer{ 
 
    bottom:0; 
 
    width: 100%; 
 
    background-color: gray; 
 
    height: 200px; 
 
    position: fixed; 
 
}

<main class="cd-main-content"> 
 
\t \t <nav class="cd-side-nav"> 
 
    
 
    </nav> 
 
    
 
</main> 
 

 

 
<div class="footer">FOOTER</div>

Answer 1

당신은 이런 식으로 작업을 수행 할 수 있습니다

/* basic CSS browser reset */ 
 
* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
.cd-main-content { 
 
    position: relative; /* added */ 
 
} 
 

 
.cd-side-nav { 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    padding: 45px 0 0; 
 
    background-color: #2c3136; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    height: 100vh; /* modified */ 
 
    overflow: hidden; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s; 
 
    -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s; 
 
    transition: opacity 0.2s 0s, visibility 0s 0.2s; 
 
} 
 

 
@media only screen and (min-width: 768px) { 
 
    .cd-side-nav { 
 
    position: absolute; 
 
    /*float: left; not necessary */ 
 
    top: 0; /* modified */ 
 
    left: 0; /* added */ 
 
    width: 110px; 
 
    height: calc(100vh - 200px); /* modified/- 200px of the .footer height/should use the height property for both */ 
 
    padding-top: 55px; 
 
    /* reset style */ 
 
    visibility: visible; 
 
    opacity: 1; 
 
    overflow: visible; 
 
    } 
 

 
    .footer { 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: gray; 
 
    height: 200px; 
 
    position: fixed; 
 
    } 
 
}

<main class="cd-main-content"> 
 
    <nav class="cd-side-nav"></nav> 
 
</main> 
 
<div class="footer">FOOTER</div>

그것은 아래로 바닥 글을 추진해야한다.

없음이해야하지 때문에 you'r 위치 요소 절대적으로 사용자가 수동으로 위치를 그래서 그들의 정상적인 흐름에서 그들을 걸립니다.

부동 및 지우기는 아무런 영향을 미치지 않으므로 필요하지 않습니다.