DIV Перекрытие, но не скрытие части DIV, что он перекрывает

Это может быть очень простая проблема. Или известное ограничение.DIV Перекрытие, но не скрытие части DIV, что он перекрывает

У меня есть два div. Я хотел бы, чтобы первый div спереди для перекрытия второго div назад. Я могу добиться этого.

Моя проблема в том, что первый div является прозрачным. Я не могу заставить его полностью скрывать часть второго div, который он перекрывает.

Ниже приведен HTML.

<div class="front"> 
     <div>My first div</div> 
     <div>My first div</div> 
     <div>My first div</div> 
    </div> 

    <div class="back"> 
     <div>My second div</div> 
     <div>My second div</div> 
     <div>My second div</div> 
     <div>My second div</div> 
     <div>My second div</div> 
     <div>My second div</div> 
    </div>

Ниже приведено css.

div.front { 
     height:60px; 
     width:100px; 
     border:3px solid blue; 
     position:absolute; 
     z-index:1; 
    } 
    div.back { 
     background-color:#e0e0e0; 
     border:1px solid red; 
     position:absolute; 
     z-index:-1; 
    }

Вы можете найти здесь JSFiddle http://jsfiddle.net/tomilay/p372u894/3/

Спасибо заранее.

источник

2014-09-18 tomilay

http://jsfiddle.net/p372u894/4/ ??? установите фон, равный фону, на котором будут жить эти погружения. – Rooster

Это потому, что вы используете прозрачный фон для переднего div. – Lal

Это просто невозможно. Прозрачность делает фронт div прозрачным, и весь контент за ним будет виден –

Вам необходимо предоставить фронт большинства div цвета фона.

div.front { 
     height:60px; 
     width:100px; 
     border:3px solid blue; 
     position:absolute; 
     z-index:1; 
     background-color: white; 
    } 
    div.back { 
     background-color:#e0e0e0; 
     border:1px solid red; 
     position:absolute; 
     z-index:-1; 
    }

источник

2014-09-18 17:06:08 StephenCollins

Хотелось бы, чтобы я спросил раньше. Задача решена. – tomilay

Как вы только что говорили, background-color из front является прозрачным, чтобы вы себе, что стоит за ним. Попробуйте седения background-color отличаются прозрачной для этой работы, как youw хотят:

JSFiddle образец: http://jsfiddle.net/p372u894/7/

CSS обновление:

div.front { 
    height:60px; 
    width:100px; 
    border:3px solid blue; 
    position:absolute; 
    z-index:1; 
    background-color: white; /* Setting background-color */ 
}

источник

2014-09-18 17:13:39

Просто добавьте серый цвет фона на ваш <div> с front класс.

div.front { 
    height:60px; 
    width:100px; 
    border:3px solid blue; 
    position:absolute; 
    z-index:1; 
    background-color:#e0e0e0; 
}

Пожалуйста, проверьте это: jsFiddle.

источник

2014-09-18 17:14:06

DIV Перекрытие, но не скрытие части DIV, что он перекрывает

ответ

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