Блог

Главная - Вопросы по программированию - Как поместить содержимое span поверх всех других элементов без переноса?

Как поместить содержимое span поверх всех других элементов без переноса?

#html #css

#HTML #css

Вопрос:

У меня есть span рядом с каждым элементом формы на странице, который показывает ошибку, если она есть. На странице в основном два столбца, левый и правый. Я пытаюсь заставить span отображаться из левого столбца по всей странице (не переносясь на 2-ю строку на границах левого столбца). столбец).

Я некоторое время играл с позиционированием и z-индексами и не могу заставить это работать, поэтому я решил опубликовать jsfiddle, чтобы посмотреть, может ли кто-нибудь помочь пролить свет:

http://jsfiddle.net/zZ7MN/3/

Ответ №1:

 .one_third, .two_third {
    float:left;
    margin-bottom:10px;
    margin-right:40px;
}

.formerror {
    position: absolute;
    width: auto;
    left: 320px;
    top: 45px;
    border: 1px solid #FF7878;
    background-color: #FFBABA;
    padding:4px 6px 4px 6px;
    color: #D8000C;
}

Комментарии:

1. Но насколько это можно использовать повторно? Если на странице несколько ошибок, разве они не будут просто накладываться друг на друга? РЕДАКТИРОВАТЬ Я протестировал это с помощью fiddle, и ошибка все еще была завернута!

2. @sdleihssirhc: оно не будет перенесено, если вы увеличите ширину области скрипки «Результат»

3. Ах, ты прав… Но он накладывает сообщения об ошибках друг на друга: jsfiddle.net/zZ7MN/5

4. @sdleihssirhc: его можно использовать повторно, если вы устанавливаете собственные свойства «top» и «left» для каждого сообщения об ошибке. В любом случае, это взлом существующей проблемы. Если бы мне пришлось создавать такое сообщение об ошибке — я бы сделал его поверх поля ввода с меньшим шрифтом, чтобы оно подходило без переноса и не требовалось никакого «абсолютного» стиля 😉

5. Это не работает из-за того, что поле #content равно **margin: 15px auto; ** . Я пытался заставить .formerror отображать 20 пикселей справа от элемента формы (см. Пример, опубликованный Выше)

Ответ №2:

 .formerror {
    position: absolute;
    width: 560px;
    overflow: visible;        
    border: 1px solid #FF7878;
    background-color: #FFBABA;
    padding:4px 6px 4px 6px;
    color: #D8000C;
    z-index: 999;
}

Дмитрий был близок, его проблема заключалась в том, что он указывал атрибут left. Когда позиция изменяется на абсолютную, это приводит к перемещению span на N пикселей слева от экрана. Удалите левую часть и дайте вашему span заданную ширину, и он больше не будет переноситься!!

Вот решение в jsfiddle http://jsfiddle.net/zZ7MN/8 /