[CSS] Box-shadow problem.

Question

Witam! Na wstępie chcę zaznaczyć, że jestem początkującym. Mam pewien problem, a mianowicie chciałbym pod divem, który jest "paskiem" prezentującym nazwę strony i chciałbym pod tym "paskiem" umieścić cień, po to by "pasek" wyglądał na lekko wysunięty od tła. Problem polega na tym, że jest jeszcze jeden div, który ma być przeznaczony nawigacji i on zasłania mi część tego cienia. 

Chciałbym żeby ten cień był na całej szerokości tego "paska". Z góry dziękuję za pomoc.

body
{
    background-color: #f2f2f2;
    margin: 0 !important;
}

.pasek
{
    background-image: url(photos/geometry.png);
    height: 100px;
    width: 100%;
    color: black;
    font-family: 'Spicy Rice', cursive;
    box-shadow: 0px 1px 1px black;
    font-size: 60px;
    text-align: center;
}

.nav
{
    background-color: #f2f2f2;
    width: 300px;
    height: 1000px;
    padding: 20px;
}

 

Answer 1

Myślę, że z-index i position relative załatwią temat, spróbuj:

body
{
    background-color: #f2f2f2;
    margin: 0 !important;
}
 
.pasek
{
    background-image: url(photos/geometry.png);
    height: 100px;
    width: 100%;
    color: black;
    font-family: 'Spicy Rice', cursive;
    box-shadow: 0px 1px 1px black;
    font-size: 60px;
    text-align: center;
    position: relative;
    z-index: 100;
}
 
.nav
{
    background-color: #f2f2f2;
    width: 300px;
    height: 1000px;
    padding: 20px;
    z-index: 80;
}

 

Comments

Wielkie dzięki, działa!