css - отображать div над другим

#html #css

#HTML #css

Вопрос:

В настоящее время я работаю над решением, в котором я должен отображать сообщение об ошибке над (z-index) разделом.

Для атрибута css overflow в разделе установлено значение scroll или hidden . Это приводит к усечению сообщения об ошибке с левой стороны.

Я бы очень хотел сохранить DOM таким, какой он есть. Есть ли способ отобразить div для сообщения об ошибке «над» синим div.

Js fiddle

HTML :

 <div>
<div id="div1">
    div 1
</div>
<div id="div2">
    div 2
    <div id="msgErreur">
        Error
    </div>
</div>
</div>

** CSS : **

 #div1 { 
width : 48%;
border: 1px solid red;
height: 150px;
float:left;
}

#div2 { 
width : 48%;
border: 1px solid blue;
height: 150px;
float:right;
overflow-y:scroll;
 }

#msgErreur {
background:#942911;
color:white;
top:30px;
left: -10px;
width : 150px;
height : 30px;
position:relative;
z-index:5;
}

1. Пожалуйста, опубликуйте код в вопросе

2. z-index: 5px должно быть z-index: 5 . но это не решает проблему

3. @Alp Спасибо, теперь это исправлено…

4. Вы могли бы использовать position: absolute или position: fixed , если вы не возражаете, для подсчета пикселей с самой левой стороны. Но я думаю, что это не вариант.

5. @alp Этот тестовый пример представляет собой представление гораздо более сложного приложения, использующего шаблоны с AngularJS. Это просто для того, чтобы посмотреть, не упускаю ли я чего-то.

Ответ №1:

редактировать: 2 способа достижения этого. Относительно расположенный (дополнительный) элемент в абсолютно позиционированном элементе или (новый) абсолютно позиционированный элемент и transform .

Вы можете добиться этого, используя position: absolute в контейнере сообщения об ошибке и дополнительный div, расположенный относительно между контейнером и сообщением.
DOM немного изменен, но без перемещения целых блоков кода, может быть, это соответствует вашим требованиям?

Соответствующий HTML:

 <div id="msgErreur">
    <div>Error</div>
</div>

Соответствующий CSS:

 #msgErreur {
    position: absolute;
    z-index: 5;
    color: white;
}
#msgErreur > div {
    position: relative;
    top: 30px; left: -10px;
    width: 150px; height: 30px;
    background: #942911;
}

Скрипка

РЕДАКТИРОВАТЬ: это 2016 год и transform: translate(X, Y) совместим с большим набором браузеров (IE9 в соответствии с caniuse.com ). Вот еще один способ достичь того, что требуется OP, без необходимости в дополнительном элементе:

 #div1 { 
    width : 48%;
    border: 1px solid red;
    height: 150px;
    float:left;
}
#div2 { 
    width : 48%;
    border: 1px solid blue;
    height: 150px;
    float:right;
    overflow-y:scroll;
}

#msgErreur {
    background:#942911;
    color:white;
    /* top:30px; */
    /* left: -10px; */
    width : 150px;
    height : 30px;
    position: absolute; /* not relative anymore */
    /* z-index:5; It's already stacked above if positioned. Needed if other positioned elements are there (a value of 1 would be enough) */
    transform: translate(-10px, 30px); /* replaces relative positioning (left and top => X and Y) */
}

 <div>
    <div id="div1">
        div 1
    </div>
    <div id="div2">
        div 2
        <div id="msgErreur">
            Error
        </div>
    </div>
</div>

Codepen