Блог

Я прочитал десятки сообщений на эту тему, но у всех остальных возникают проблемы с горизонтальным переполнением, тогда как у меня вертикальные, и такие решения, как плавающий, очистка и настройка параметров переполнения, похоже, не работают. Вот код:

HTML:

         <div style="padding:25px">
                              <? $pieces = explode("|",$row['comments']); foreach ($pieces as $comment) { $comment = explode("~",$comment); ?>
                                <div class="commentdiv" style="padding:10px;border-radius: 5px; position:relative; float:left; width:100%; margin-bottom:25px; background-color:#FFF;"> 
                                    <div class="commentcover" style="clear:both">Written by <i><? echo $comment[1]; ?></i> on <b><? echo $comment[2]; ?></b></div>
                                    <div class="commentholder" style="clear:both"><? echo $comment[0]; ?></div>
                                    <div style="clear:both"></div>
                                </div>
                              <? } ?>
        </div>
  

CSS:

 .commentcover {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 90%;
    z-index: 500;

    padding:10px;
    background-color: #fff;
    opacity: 0;
    filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0);
    border-radius: 5px;
    text-align:center
}

.commentholder {
    position:absolute; top:10px; left:5%; z-index:400; width:90%;
}
  

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

Вот ссылка на то, над чем я работаю — запись в таблице расширена, чтобы показать несколько отдельных комментариев. Наведение курсора мыши приводит к тому, что закрывающий div исчезает над комментарием с указанием даты и автора комментария. Просто откройте верхнюю строку таблицы и наведите курсор мыши на комментарии, чтобы увидеть, о чем я говорю (конечно, не работает в IE). Прямо сейчас поля комментариев имеют заданную высоту, но это не идеальное решение. Вы можете видеть, что самый длинный комментарий уже немного переполнен.

Что вы, ребята, думаете?

Предоставление абсолютной позиции выводит владельца комментария из обычного потока документа. Таким образом, commentdiv притворяется, что его там нет, поэтому текст «переполняет» содержащий commentdiv.

абсолютный

Элемент с position: absolute вынимается из обычного потока страницы и позиционируется в нужных координатах относительно содержащего его блока.

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

ссылка: http://www.quirksmode.org/css/position.html

Редактировать:

Я не совсем уверен, какого перекрытия вы пытаетесь достичь, но этот CSS установит commentcover поверх commentholder. Я удалил непрозрачность: 0, чтобы показать, как это будет выглядеть. И я оставил другие стили как можно ближе к оригиналу.

 .commentdiv {
    padding:10px;
    border-radius: 5px;
    float:left; /* because the children are floated, floating the parent so height changes */
    width:100%; 
    margin-bottom:25px; 
    background-color:#FFF;
}

.commentcover {
    position:relative; /* so z-index still works */
    width: 90%;
    margin:0 auto;
    z-index: 500;
    padding:10px;
    background-color: #fff;
    border-radius: 5px;
    text-align:center;
}

.commentholder {
    position:relative; /* so z-index works */
    float:left;
    z-index:400; 
    width:90%;
    margin-top:-2em;
}