Привязка границы применяется к неправильному элементу

У меня есть боковой навигатор с CSS border-right. Но border-right также применяется к заголовку. Даже после использования z-index результата не было.Привязка границы применяется к неправильному элементу

HTML

<div id="sideNav" class="visible-lg"> 
    <ul> 
    <li> 
     <a class="active" href="#">Dashboard</a> 
    </li> 
    <li> 
     <a href="#">Content1</a> 
    </li> 
    <li> 
     <a href="#">Content2</a> 
    </li> 
    </ul> 
</div> 

<div id="header"> 
    <div> 
    <img src="http://placehold.it/220x37" alt="logo" style="margin-left: 10px; width: 70%;" /> 
    </div> 
    <div style="margin-left: 20%"> 
    <label class="projTitle">App Name</label> 
    </div> 
</div> 

<div id="mainContent"> 
    <div class="body-content"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur congue diam, ut posuere ante. Proin sed ligula quis neque commodo accumsan. Ut vitae sollicitudin ex, consequat vestibulum lacus. Nullam volutpat turpis sed posuere faucibus. 
    </p>  
    </div> 
</div>

CSS

* { 
    margin: 0; 
} 

body { 
    font-family: Sans-Serif; 
    position: relative; 
} 

.form-control { 
    width: 95%; 
} 

#header { 
    position: relative; 
    color: #0b4faa; 
    display: flex; 
    align-items: center; 
    width: 100%; 
    height: 70px; 
    -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5); 
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5); 
    border-bottom: 0.02em solid #c1c1c1; 
    z-index:508; 
} 

label.projTitle { 
    font-size: 24px; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
} 

#sideNav { 
    border-right: 0.02em solid #c1c1c1; 
    height: 100%; 
    position: fixed; 
    width: 220px; 
    z-index:504; 
} 

#sideNav ul { 
    margin-top: 70px; 
    list-style-type: none; 
    padding: 0; 
} 

#sideNav a { 
    text-decoration: none; 
    font-size: 14px; 
    text-transform: uppercase; 
    display: block; 
    padding: 5%; 
    transition: all 0.25s ease-out; 
} 

#sideNav ul li { 
    border-bottom: 1px solid; 
    border-bottom-color: #fff; 
    letter-spacing: 0.04em; 
} 

#sideNav ul li:not(.active) a:hover { 
    background: rgba(0, 0, 0, 0.2); 
} 

.active { 
    background: rgba(0, 0, 0, 0.2); 
    border-left: 5px solid; 
    border-left-color: #337ab7; 
} 

.active a { 
    color: #0b4faa; 
    font-weight: 600; 
} 

#mainContent { 
    height: 100%; 
    margin-left: 200px; 
    z-index: 20; 
} 

.body-content { 
    margin: 0 45px; 
}

Fiddle

источник

2017-01-06 Raviteja

Дайте ваш заголовок на цвет фона. Правая граница просто демонстрируется, поскольку в настоящее время она прозрачна. – allnodcoms

Итак, элементы имеют прозрачный фон по умолчанию? – Raviteja

Дайте #header цвет фона. В настоящее время он не установлен и прозрачен. Из-за этого появятся элементы «под» #header.

источник

2017-01-06 09:19:53 LuudJacobs

Thanks.It Worked.Will принять после 8 минут :) – Raviteja

Должен был дать мой комментарий в качестве ответа ...;) – allnodcoms

Спасибо @allnodcoms, но LuudJacobs ответил первым – Raviteja

Удалить границу из #sideNav и добавить к уль

#sideNav { 
    height: 100%; 
    position: fixed; 
    width: 220px; 
    z-index: 504; 
} 
#sideNav ul { 
    margin-top: 70px; 
    list-style-type: none; 
    padding: 0; 
    border-right: 0.02em solid #c1c1c1; 
    height: 100%; 
}

Или

Удалить Маржа-топ из мкл и добавить к #sideNav

#sideNav { 
    margin-top: 70px; 
    border-right: 0.02em solid #c1c1c1; 
    height: 100%; 
    position: fixed; 
    width: 220px; 
    z-index: 504; 
} 
#sideNav ul { 
    list-style-type: none; 
    padding: 0; 
}

источник

2017-01-06 09:19:45

Маржа удалить на ул & Добавить верхнее положение #sideNav

#sideNav { 
    border-right: 0.02em solid #c1c1c1; 
    height: 100%; 
    position: fixed; 
    top: 70px; 
    width: 220px; 
    z-index: 504; 
} 
#sideNav ul { 
    list-style-type: none; 
    margin-top: 0px; 
    padding: 0; 
}

https://jsfiddle.net/abxnkveu/2/

источник

2017-01-06 09:21:33

граница не будет применена к верхнему пустому пространству над первым ли, когда мы прокрутим вниз. – Raviteja

Привязка границы применяется к неправильному элементу

ответ

Смежные вопросы